Angular2 Form Eingang bleibt unberührt

Question

ich eine angular2 Form haben Benutzer-Passwort wie diese gebaut für die Änderung (ich alle nicht benötigten Elemente entfernt):

<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> 

Und die Komponente:

@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 
     }); 
    } 

    ... 
} 

Das Problem ist, Wenn ich etwas in die Eingabefelder eintippe, werden sie nicht ungültig und bleiben untouched. Das funktionierte für mich und ich denke, es funktioniert nicht, nachdem ich @angular Bibliotheken meine aktualisiert ... Das Komische ist, ich eine andere Form haben, die nicht die Formbuilder nicht verwendet und es funktioniert es ganz gut ...

Ist es ein Bug in den neuen kantigen Formen oder fehlt mir hier etwas?

Answer 1

Ich habe das Problem, seit dem letzten Upgrade haben Sie die formControlName verwenden müssen, wenn Sie die Formular-Builder wie so verwenden:

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

Statt:

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

Der Grund, es ist erstellt FromControl, die nicht auf die gleiche Weise funktioniert wie zuvor

Ich fand die Antwort in dieser Frage: Angular 2 - Inject ngModel in custom directive when html field has formControlName