Angular2 表单输入保持不变答案

【问题标题】：Angular2 form input stays untouchedAngular2 表单输入保持不变
【发布时间】：2016-07-30 13:47:47
【问题描述】：

我有一个 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 的表单，它工作得很好......

这是新角度形式的错误还是我在这里遗漏了什么？

【问题讨论】：

标签： angular angular2-forms

【解决方案1】：

我发现了问题，自上次升级以来，如果您像这样使用表单生成器，则需要使用 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

【讨论】：