Angular2形式輸入保持不變

我改變建這樣的用戶密碼的angular2形式（我刪除了所有不需要的元素）：Angular2形式輸入保持不變

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

和組件：

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

    ... 
}

的問題是當我在輸入字段中鍵入內容時，它們不會失效並保留untouched。這個工作對我來說，我認爲它停止工作，我更新了我的@angular庫後... 有趣的是，我有另一種形式不使用formBuilder有它工作得很好......

是它在新的角度形式的錯誤，或者我在這裏想念什麼？

來源

2016-07-30 Slava Shpitalny

我已經找到了問題，因爲最後的升級需要，如果你使用表單生成像這樣使用formControlName：

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

相反的：

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

的原因是什麼呢創建FromControl這是不一樣的以前的方式

我在這個問題中找到答案： Angular 2 - Inject ngModel in custom directive when html field has formControlName

來源

2016-07-30 14:44:11

Angular2形式輸入保持不變

回答

相關問題