当 updateOn 模糊时形成异步验证，订阅 statusChanges 或 valueChanges

Question

我在我的 Angular7 应用程序中使用带有 updatOn: 'blur' 的表单异步验证。 stackblitz

在这种情况下，我需要检查名称是否唯一（异步验证）。

this.myForm.get('name').statusChanges.subscribe(status => {
    if (status === 'VALID') {
        // to save the name to database.
    } else {
        // to show some errors.
    }
});

问题是，这段代码放在哪里？

当前方式

我在子组件中试过这个

@Input()
set myForm(myForm: FormGroup) {
  this._myForm = myForm;
  this.myForm.get('name').statusChanges.subscribe(status => {    // to subscribe statusChanges here.
    if (status === 'VALID') {
        // to save the name to database.
    } else {
        // to show some errors.
    }
  });
}

get myForm() {
  return this._myForm;
}


_myForm: FormGroup

成功了。但是我至少有 10 个属性要做表单验证，这会给这个@Input() set myForm() {} 添加太多代码，所以我需要在另一个函数中执行此操作。

所以，我退出订阅@Input 属性中的statusChange。如果不在这里，我应该在哪里做呢？

我无法订阅ngOnInit 中的statusChange，因为ngOnInit 中的值未定义。

请大家帮帮我。

Answer 1

我认为您可以在这种情况下使用directive - 创建一个指令并添加必要的input 字段

指令

@Directive({
  selector: '[dynamicValidation]'
})
export class DynamicValidationDirective {

  constructor(private control: NgControl) { }

  ngOnInit() {
    if (this.control && this.control!= undefined) {
      this.control.statusChanges.subscribe((status) => {
        // Your logic will go here
      });
    }       
  }
}

现在只需在特定输入字段中添加directive

输入

<input [formControlName]="controlName"
                         type="text"
                         dynamicValidation        //Added the directive
                         class="form-control form-control-sm" />

现在所有输入字段都将被标记为订阅，并且当状态更改时，特定输入值将分别更新

希望这对您有所帮助 - 谢谢！！