Question

我有一个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的形式，它在那里工作得很好......

这是新角度形式的错误还是我错过了什么？

Answer 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

Angular2表单输入保持不变

1 个答案: