Angular 4+禁用FormControl而不禁用HTML元素答案

【问题标题】：Angular 4+ Disable FormControl without disabling the HTML elementAngular 4+禁用FormControl而不禁用HTML元素
【发布时间】：2020-06-15 21:24:20
【问题描述】：

我是响应式表单的新手。

这是我的代码，我在其中禁用了登录表单中的密码（用户名和密码）

this.loginForm.get('password').disable();

所以下次提交表单时，不会检查密码的验证器。

这很好，但是有没有办法在不禁用 HTML 元素的情况下禁用 FormControl？

我希望客户端能够输入密码，即使它没有被验证。

以下是客户端登录步骤，以了解我为什么想要这种行为：

客户端填写用户名
关于用户名模糊 - 验证表单（只是没有密码的用户名）并检查服务器是否用户存在并返回用户全名（例如 John Smith）。客户端按TAB键进入密码字段后，用户名字段模糊
当验证用户名的HTTP请求被发送到服务器时，应该允许客户端输入密码，即使密码FormControl被禁用
用户名有效（我们收到了服务器的响应）并且我们启用密码FormControlthis.loginForm.get('password').enable();
客户端按下登录按钮验证用户名和密码并进行登录。

【问题讨论】：

你可以用 clearValidators() 代替 disable()。然后用 setValidator 代替 enable()。我想有一种更清洁的方法，但你所做的似乎有点微妙，所以这可能是你最好的选择。
我想过，但我想先问一下，也许我可能会错过一个选项
angular.io/api/forms/AbstractControl#clearValidators - 这里是 Reactive Forms 方法的有用列表

标签： angular angular-forms

【解决方案1】：

我还偶然发现了一个动态生成的表单问题，该表单需要显式禁用多个 FormControl 才能仅获得更改值的有效性值。

我查看了 Angular 源代码并发现了这个： https://github.com/angular/angular/blob/62e4acc3d1be412e221b20bdc68618a35ba0c1a8/packages/forms/src/directives/reactive_directives/form_control_directive.ts#L128

这是 formControl 指令的代码，它禁用 DOM 元素。我们可以在禁用 FormControl 后调用相同的函数来重新启用 DOM 元素。

这就是我所做的：

在您的模板中：

// Template for MyFormComponent
<form [formGroup]="loginForm">
  <my-component #thisComponent
    [formControl]="loginForm.controls['password']"
    (valueChange)="onChange(thisComponent)"
  />
</form>

在 TypeScript 中：

@Component({
  selector: 'my-component',
  // ...
})
class MyComponent implements ControlValueAccessor {
  // implement ControlValueAccessor...
}

@Component({
  // ...
})
class MyFormComponent {
  loginForm = new FormGroup({
    password: new FormControl('')
  });

  onChange(valueAccessor: ControlValueAccessor): void {
    this.loginForm.get('password')!.disable();
    if (valueAccessor.setDisabledState) {
      valueAccessor.setDisabledState(false);
    }
  }
}

备注：

只要您使用的 HTMLElement 实现了 DefaultValueAccessor，您就不需要实现 ControlValueAccessor 的自定义组件，如下所示： https://github.com/angular/angular/blob/62e4acc3d1be412e221b20bdc68618a35ba0c1a8/packages/forms/src/directives/default_value_accessor.ts#L62-L75

【讨论】：