Angular 组件作为自我验证的表单控件答案

【问题标题】：Angular components as self validating formControlsAngular 组件作为自我验证的表单控件
【发布时间】：2018-03-09 18:09:09
【问题描述】：

我不确定是否有更好的方法来做到这一点，我认为应该有。基本上我有一个组件，我想将其视为独立的表单控件。此控件将始终附加某种特殊验证，并且我希望它在使用组件时冒泡到表单中。

我附上了plunker。如果组件/formControl 无效，是否有办法将表单标记为无效？我知道我可以将验证器添加到表单本身，但我想让事情变得更容易和更可预测，以便将来使用这个组件。我也愿意接受更好的想法。

@Component({
  selector: 'my-app',
  template: `
    <form [formGroup]="form">
      <my-component-control formControlName="myComponent"></my-component-control>
    </form>
    <div>Form Value: {{form.value | json}}</div>
    <div>Form Valid: {{form.valid}}</div>
  `,
})
export class App {
  constructor(fb: FormBuilder) {
    this.form = fb.group({
      myComponent: ''
    });
  }
}

@Component({
  selector: 'my-component-control',
  template: `
    <div>Control Errors: {{control.errors | json}}</div>
    <input [formControl]="control">
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      multi: true,
      useExisting: forwardRef(() => MyComponentComponent),
    }
  ]
})
export class MyComponentComponent implements ControlValueAccessor {
  control: FormControl;

  onChange: any = () => { };
  onTouched: any = () => { };

  constructor() {
    this.control = new FormControl('', (control) => {
      return control.value ? null : {shouldHaveSomething: true};
    });
    this.control.valueChanges.subscribe((value) => {
      this.onChange(value);
      this.onTouched();
    });
  }

  writeValue (obj: any): void {
    this.control.setValue(obj);
  }
  registerOnChange (fn: any): void {
    this.onChange = fn;
  }
  registerOnTouched (fn: any): void {
    this.onTouched = fn;
  }
  setDisabledState?(isDisabled: boolean): void {
    throw new Error('Method not implemented.');
  }
}

【问题讨论】：

看看 angular/material 的方法。它们将表单字段与mat-error 指令分开：github.com/angular/material2/blob/…
@masterfloda 感谢您的信息。我有类似的东西来显示控件本身有一个错误，但是我真正需要它来影响表单本身的valid 属性，因为我不希望ngSubmit 在表单实际有效之前是可触发的.这有意义吗？
是的，但我不会将验证作为字段组件的一部分。只需使用 Angular 的表单验证 angular.io/guide/form-validation#reactive-form-validation 。还是我不知何故错过了这里的重点？
我可以做到这一点。我只是想避免它，因为这个组件将在多个地方使用，而且我知道有一天我会忘记将验证器添加到表单中。我只是希望有一种方法可以让它始终验证这个组件。
有道理...我自己没试过，所以只是猜测，但你可以使用FormControlangular.io/api/forms/AbstractControl#setValue的setError方法

标签： javascript angular forms angular-reactive-forms

【解决方案1】：

一种解决方案是在主机AbstractControl 上使用setValidators 方法

为此，我将通过NgControl 引用AbstractControl。我们不能只在构造函数中注入NgControl，因为我们会遇到实例化循环依赖的问题。

constructor(private injector: Injector) {
  ...     
}

ngOnInit() {
  Promise.resolve().then(() => {
    const hostControl = this.injector.get(NgControl, null);
    if (hostControl) {
      hostControl.control.setValidators(this.control.validator);
      hostControl.control.updateValueAndValidity();
    }
  }); 
}

Ng-run Example

【讨论】：

这基本上正是我想要的。谢谢。