Angular ngmodel ignores value attribute in a form input

Question

I'm kind of new to angular and, **What I'm trying to achieve is ** I need an input box in a form which has values pre-populated which I get from a parent component and I'm using the template-driven form so what I tried was

<input
                  type="text"
                  id="empinput1"
                  class="form-control"
                  name="empid"
                  ngModel
                  [value]="data['empid']"
                />

note, data is the input i got from parent component

and usually, onsubmit gives the value of the input in relation to the name property of the input box thus I can send to the API But this gives me a blank input box rather than populating the value as set by [value] field any help is highly appreciated :D

Answer 1

You should use ngmodel:

Creates a FormControl instance from a domain model and binds it to a form control element.

So, for your case (more info here):

<input type="text" id="empinput1" class="form-control" name="empid" [(ngModel)]="data['empid']"/>

And if you want to use within a form you can check the angular example here:

import {Component} from '@angular/core';
import {NgForm} from '@angular/forms';

@Component({
  selector: 'example-app',
  template: `
    <form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
      <input name="first" ngModel required #first="ngModel">
      <input name="last" ngModel>
      <button>Submit</button>
    </form>

    <p>First name value: {{ first.value }}</p>
    <p>First name valid: {{ first.valid }}</p>
    <p>Form value: {{ f.value | json }}</p>
    <p>Form valid: {{ f.valid }}</p>
  `,
})
export class SimpleFormComp {
  onSubmit(f: NgForm) {
    console.log(f.value);  // { first: '', last: '' }
    console.log(f.valid);  // false
  }
}