当 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" />

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

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

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

form async validation when updateOn is blur, to subscribe statusChanges or valueChanges

forms

angular

angular2-form-validation