Question

我是Reactive Forms的新手。

这是我的代码，我从登录表单（用户名和密码）

禁用密码

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

因此，下次提交表单时，不会检查密码的验证程序。

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

我希望客户能够输入密码，即使它未经过验证。

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

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

Answer 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

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

1 个答案: