javascript - Angular 2 FormBuilder禁用复选框选择中的字段

Question

我已经构建了 angular cli 项目并且有一个带有复选框的表单。某些字段必须在复选框选中时禁用。

表格如下:

需要在复选框选择事件中禁用/启用密码、新密码和重新键入密码字段。

HTML

<form [formGroup]="userProfileForm" (ngSubmit)="submitForm(userProfileForm.value)">

    <div class="row">
        <div class="col">
            <div class="form-group">
                <label> {{ 'USER_PROFILE_MODEL.USER_NAME' | translate }}</label>
                <input class="form-control" type="text" [formControl]="userProfileForm.controls['userName']">
            </div>
            <div class="form-group ">
                <label>{{ 'USER_PROFILE_MODEL.DISPLAY_NAME' | translate }}</label>
                <input class="form-control" type="text" [formControl]="userProfileForm.controls['displayName']">
            </div>
            <div class="form-group ">
                <label>{{ 'USER_PROFILE_MODEL.EMAIL' | translate }}</label>
                <input class="form-control" type="text" [formControl]="userProfileForm.controls['email']">
            </div>
        </div>
        <div class="col">
            <div class="form-group ">
                <label class="checkbox-inline">
                <input type="checkbox" value="isResetPassword" name="isResetPassword" [formControl]="userProfileForm.controls['isResetPassword']">  
                 {{ 'USER_PROFILE_MODEL.RESET_PASSWORD' | translate }}
              </label>
            </div>
            <div class="form-group ">
                <label>{{ 'USER_PROFILE_MODEL.PASSWORD' | translate }}</label>
                <input class="form-control" type="password" [formControl]="userProfileForm.controls['password']">
            </div>
            <div class="form-group ">
                <label>{{ 'USER_PROFILE_MODEL.NEW_PASSWORD' | translate }}</label>
                <input class="form-control" type="password" [formControl]="userProfileForm.controls['newPassword']">
            </div>
            <div class="form-group ">
                <label>{{ 'USER_PROFILE_MODEL.RE_TYPE_PASSWORD' | translate }}</label>
                <input class="form-control" type="password" [formControl]="userProfileForm.controls['reTypePassword']">
            </div>

        </div>

    </div>
</form>

代码

this.isResetPassword = true;
this.userProfileForm = formBuilder.group({
    'userName': [null, [Validators.required]],
    'displayName': [null],
    'email': [null, [Validators.required]],
    'isResetPassword': this.isResetPassword,
    'password': [{
        value: null,
        disabled: this.isResetPassword
    }],
    'newPassword': [{
        value: null,
        disabled: this.isResetPassword
    }],
    'reTypePassword': [{
        value: null,
        disabled: this.isResetPassword
    }]
})

Form 已在构造函数中构建。如何在复选框选择时禁用/启用上述字段。

Answer 1

一开始，我认为当且仅当 isResetPassword 时，您才希望启用 字段checkbox 已选中，对吧？如果是这样，我们开始吧:

1 - 表单的构造应该是这样的:

this.userProfileForm = this.formBuilder.group({
  // ...
  password: [{
    value: null,
    disabled: !this.isResetPassword
  }],
  newPassword: [{
    value: null,
    disabled: !this.isResetPassword
  }],
  reTypePassword: [{
    value: null,
    disabled: !this.isResetPassword
  }]
});

请注意，这里我仅在 this.isResetPassword 时禁用输入是假的。

2 - 检测 <input type="checkbox"> 上的变化, 您可以使用 (change)在模板中:

<label>
  <input 
    type="checkbox" 
    [formControl]="userProfileForm.controls['isResetPassword']" 
    (change)="handleChange($event)">
  {{ 'USER_PROFILE_MODEL.RESET_PASSWORD' | translate }}
</label>

...甚至，在组件中，使用valueChanges :

this.userProfileForm.get('isResetPassword').valueChanges.subscribe(value => this.handleChange(value));

当然，这里是 function操纵字段的状态。

handleChange(value: boolean): void {
  const passwordCtrl = this.userProfileForm.get('password');
  const newPasswordCtrl = this.userProfileForm.get('newPassword');
  const reTypePasswordCtrl = this.userProfileForm.get('reTypePassword');

  if (value) {
    passwordCtrl.enable();
    newPasswordCtrl.enable();
    reTypePasswordCtrl.enable();
  } else {
    passwordCtrl.disable();
    newPasswordCtrl.disable();
    reTypePasswordCtrl.disable();
  }
}

---

一些提示:

1 - 虽然这只是一个偏好问题，但值得一提的是您不需要使用 [formControl]像这样:

[formControl]="userProfileForm.controls['isResetPassword']"

相反，您可以简单地使用 formControlName :

formControlName="isResetPassword"

请注意，您可以对所有控件 执行相同的操作。

2 - 您不需要在 (ngSubmit) 中传递表单值因为您已经引用了 userProfileForm在 form .

代替:

(ngSubmit)="submitForm(userProfileForm.value)"

submitForm(value: any) { console.log(value); }

这个:

(ngSubmit)="submitForm()"

submitForm() { console.log(this.userProfileForm.value); }

3 - 如果您想查看 value禁用的输入，而不是 .value , 你应该使用 .getRawValue() ，像这样:

this.userProfileForm.getRawValue();

---

DEMO (using (change) )

DEMO (using valueChanges )