The View is not reflecting changes in the Variable

Question

The View is not reflecting changes in the Variable

Is there a way to disable all the buttons when selectedplace is null in the Dialog, as it currently works when the Dialog first starts but remains activated all the time when the option is changed?

I have attempted the following:

Customized HTML:

      <label for="place">Einheit</label>
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <button class="btn btn-outline-secondary" [disabled]="!selectedplace" type="button">Change</button>
        </div>
        <select id="place" name="place" #place="ngModel" required class="form-control" [(ngModel)]="selectedplace" (change)="onDropdownChangeplace()">
          <option value=""></option>
          <option *ngFor="let i of UI_places" [ngValue]="i">{{i.name}}</option>
        </select>
        <div class="alert alert-danger" *ngIf="place.touched && !place.valid">Bitte eine Eingeben eingeben!</div>
        <div class="input-group-append">
          <button class="btn btn-outline-secondary" [disabled]="!selectedplace" type="button">Add</button>
          <button class="btn btn-outline-secondary" [disabled]="!selectedplace" type="button">Delete(red)</button>
        </div>
      </div>

TypeScript(declared):

public selectedplace: Place;

Any suggestions on what action I should take next?

angular typescript

Answer 1

Answer №1

What method are you implementing in onDropdownChangeplace? It seems like you are dynamically assigning a value based on the index that has been changed.

If no value is assigned (in the case of an empty selection), the ngModel will retain the previous value.

You can view the working example on stackblitz here, where based on your code, the enable and disable functionality is working properly.

The code in the component is provided below, with the HTML left unchanged according to your specifications.

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {
    public UI_places = [{id:0, name: 'home'},{id:1, name: 'work'}];
    public selectedplace: Place;

    onDropdownChangeplace() {
        // Your implementation goes here
    }
}

Answer 2

What method are you implementing in onDropdownChangeplace? It seems like you are dynamically assigning a value based on the index that has been changed.

If no value is assigned (in the case of an empty selection), the ngModel will retain the previous value.

You can view the working example on stackblitz here, where based on your code, the enable and disable functionality is working properly.

The code in the component is provided below, with the HTML left unchanged according to your specifications.

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {
    public UI_places = [{id:0, name: 'home'},{id:1, name: 'work'}];
    public selectedplace: Place;

    onDropdownChangeplace() {
        // Your implementation goes here
    }
}

The View is not reflecting changes in the Variable

Answer №1

Similar questions

What are the recommended techniques for utilizing prototypal and prototype-based inheritance in modern JavaScript (ES6) and TypeScript?

There is no index signature that includes a parameter of type 'string' in the specified type

Round off Kendo Column Chart edges and add a personalized highlight shade

Using JavaScript to define an array of objects

Learning how to serve static files in a virtual directory with Angular Universal and Asp Net Core

using props as arguments for graphql mutation in react applications

Having trouble with ESLint in VSCode? The ESLint extension seems to be ignoring linting rules after starting a new project within VSCode

What is the most effective method for declaring callbacks on objects in Typescript?

Using React Native with TypeScript to Select the Parent and Child Checkboxes within a FlatList

Limiting the combinations of types in TypeScript

What is the best way to prevent routing to <a href="#" > in Angular 8?

In TypeScript, the nested object structure ensures that each property is unique and does not repeat within

Error in Firebase Emulator: The refFromUrl() function requires a complete and valid URL to run properly

What is the process for displaying an enum in an Angular Mat Form Field?

Material Design Autocomplete search feature in Angular 2

The argument with type 'void' cannot be assigned to a parameter with type 'Action'

Writing TypeScript, Vue, and playing around with experimental decorators

Updating Angular 8 Component and invoking ngOninit

Utilizing functions from external modules in Angular

Navigating an array of JSON objects with the http client and Observables in Angular: A Step-by-Step Guide