Angular 个组件作为自验证 formControl

Question

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

我附上了 plunker。如果 component/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.');
  }
}

Answer 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

Angular 个组件作为自验证 formControl

Angular components as self validating formControls

javascript

forms

angular

angular-reactive-forms