Angular2 form input stays untouched

Question

I have an angular2 form for changing user password built like this (I removed all the unneeded elements):

<form id="update-user-password-form"
    [formGroup]="userPasswordFormGroup"
    (ngSubmit)="changeUserPassword()">

    <div>
      <input id="password"
             type="password"
             name="password"
             [(ngModel)]="model.password"
             #password="ngModel"/>
      <label for="password">Password</label>
    </div>

    <div ngModelGroup="newPasswordsGroup">

      <div>
        <input id="new-password"
               type="password"
               name="newPassword"
               [(ngModel)]="model.newPassword"
               #newPassword="ngModel"/>
        <label for="new-password">New Password</label>
      </div>

      <div>
        <input id="repeat-password"
               type="password"
               name="newPasswordRepeated"
               [(ngModel)]="model.newPasswordRepeated"
               #newPasswordRepeated="ngModel"/>
        <label for="repeat-password">Repeat the new password</label>
      </div>

    </div>

    <button type="submit"
          class="submit-button"
          [disabled]="!userPasswordFormGroup.valid"
          [ngClass]="{ disabled: !userPasswordFormGroup.valid }">
         Change
    </button>

</form>

And the component:

@Component({
  selector: 'change-user-password',
  template: require('./changeUserPassword.component.html'),
  styles: [require('./changeUserPassword.component.scss')],
  directives: [REACTIVE_FORM_DIRECTIVES],
  providers: [FormBuilder]
})
export class ChangeUserPasswordComponent implements OnInit {
    ...
    public model: EditUserPasswordModel;
    public newPasswordsGroup: FormGroup;
    public userPasswordFormGroup: FormGroup;
    public updateUserPasswordError: any;
    public isPasswordUpdated: boolean;
    public isUpdatingPassword: boolean;

    ...

    public ngOnInit(): void {
        ...
        this._createEmptyForm();
    }
    ...

    private _createEmptyForm(): void {
        this.newPasswordsGroup = this.formBuilder.group({
          newPassword: ['', Validators.required],
          newPasswordRepeated: ['', Validators.required]
        }, {
            validator: EqualFieldsValidator.allFieldsEqual
          });

        this.userPasswordFormGroup = this.formBuilder.group({
          password: ['', Validators.required],
          newPasswordsGroup: this.newPasswordsGroup
        });
    }

    ...
}

The issue is when I type something inside the input fields they are not invalidated and stay untouched. This worked for me and I think it stopped working after I updated my @angular libraries... The funny thing is I have another form which doesn't use the formBuilder and there it works just fine...

Is it a bug in the new angular forms or am I missing here something?

Answer 1

I have found the issue, since the last upgrade you need to use the formControlName if you use the form builder like so:

<input id="password"
       type="password"
       formControlName="password"
       [(ngModel)]="model.password"/>

Instead of:

<input id="password"
       type="password"
       name="password"
       [(ngModel)]="model.password"
       #password="ngModel"/>

The reason is it creates FromControl which is not working the same way as before

I found the answer in this question: Angular 2 - Inject ngModel in custom directive when html field has formControlName