Reactive Form, on the other hand is much more flexible however requires more effort in setting up. This form uses more code in component and less in HTML. Reactive form is best to handle complex scenarios and allow easier unit testing.
We are going to see an example of Template Driven form with ngModel binding.
<form name="personNameForm" novalidate="" ng-submit="submitForm()"> <div> <input type="text" name="firstName" class="textinput" [(ngModel)]="person.firstName" (ngModelChange)="combineNames()" required /> <input type="text" name="lastName" class="textinput" [(ngModel)]="person.lastName" (ngModelChange)="combineNames()" required /> </div> </form>Note that we need to put form's name attribute and for each ngModel field a name attribute is also required.
We use ngModelChange directive to detect changes for NgModel value. $watch and $observe are not required anymore.