CODEWITHSUNDEEP
angulartypescript
Jordi
Jordi

Reputation: 23247

Angular form field not binded

I've a form:

<form #appForm>
  <div...>
    <select
      id="transversal"
      name="transversal"
      [ngModel]="app.transversal" 
      type="select"
      required
      #transversal="ngModel">
        <option value="S">Si</option>
        <option value="N">No</option>
    </select>
  </div>
</form>

this.app is:

@Component({
    moduleId: module.id,
    templateUrl: 'aplicacions-subcomponent.component.html',
    selector: 'app-aplicacions-subcomponent'
})
export class AplicacionsSubcomponentComponent {
    private app: Application;

    @ViewChild('appForm')
    private appForm: NgForm;
}

I'm facing with app.transversal is not populated when I pick an option on my select input.

I've took a look on my form on debug time. As you can see, form.transversal is changed, but this.app.transversal keeps null:

enter image description here

I know I'm able to use (change) event. I need to solve that using above approach.

Upvotes: 0

Views: 46

Answers (1)

dave0688
dave0688

Reputation: 5770

Please take a look at your form: In your <select> element you're binding to [ngModel]. That means that you only have a one-way data binding.

In order to get a two-way data binding, please change it to [(ngModel)]. By that the vale gets written back into the model when you select something else.

Upvotes: 4

Related Questions