CODEWITHSUNDEEP
htmlangular
Bunnynut
Bunnynut

Reputation: 1328

Add an attribute on a condition with angular 2

I have a simple dropdown that is populated from an array. Users will be editing a record in a form where the priority of the record can be selected from the mentioned dropdown. I'm having difficulty with setting the selected item in that dropdown. Here's my code for that dropdown:

<select *ngIf="formModel" [(ngModel)]="record.priority" formControlName="priority">
    <option value="-1">Select priority</option>
    <option *ngFor="let priority of formModel.priorities"
        [ngValue]="priority"
        [innerHtml]="priority.name"
        [selected]="priority.id == record.priority.id"></option>
</select>

The selected priority of the record is however not selected, the resulting HTML shows selected="true". When I change the code to the following:

[selected]="(priority.id == record.priority.id ? '' : null)"

The result is selected="", but the option is stil NOT selected. I have already confirmed that that particular option should be selected. Also when I change the HTML in Firebug to just selected the option is selected. So my question is: how can I add an attribute on a certain condition so that the attribute is not added to other elements with an empty value?

Upvotes: 2

Views: 1354

Answers (2)

AVJT82
AVJT82

Reputation: 73377

Using two-way-binding is discouraged in reactive forms. The point is to utilize the form controls instead. Why use reactive form, if you are using two-way-binding? That would mean the model driven form is totally redundant. So if you want to solve this problem using the model-driven form, I'd suggest the following:

Since you are using a separate object (record.priority) it cannot automatically be bound as the pre-selected value, you'd have to somehow create a reference. So when building a form you can do this:

this.myForm = this.fb.group({
  priority: [this.formModel.priorities.find(x => x.id == this.record.priority.id)]
});

And the template would look like this:

<form [formGroup]="myForm">
  <select *ngIf="formModel" formControlName="priority">
    <option value="-1">Select priority</option>
    <option *ngFor="let priority of formModel.priorities"
      [ngValue]="priority"
      [innerHtml]="priority.name"></option>
  </select>
</form>

Now the value object you are getting from the form holds this value.

if having the record coming async, you can set a boolean flag to not show the form until the values have been set. Or you can build an empty form initially and then use setValue() for the form control.

DEMO

EDIT: Looking closer, that you want to have the condition to set null if there is no value for record.priority? That can be done well in the form control as well:

priority: [this.record.priority ? this.formModel.priorities.find(x => x.id == this.record.priority.id) : null]

Upvotes: 4

Vivek Doshi
Vivek Doshi

Reputation: 58593

Try this :

<select *ngIf="formModel" [(ngModel)]="record.priority.id" formControlName="priority">
    <option value="-1">Select priority</option>
    <option *ngFor="let priority of formModel.priorities"
        [ngValue]="priority.id"
        [innerHtml]="priority.name"></option>
</select>

[ngValue]="priority.id" and [(ngModel)]="record.priority.id" should point to the same value , and it will work automatically ,

There is no need to write [selected]="priority.id == record.priority.id"

Upvotes: 1

Related Questions