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

1 个答案: