如何根据其他Formfield更改Formfield上的验证？

Question

目标是实现一个表单，只有在填写了一个或多个输入字段时，才需要输入字段。如果没有填写任何字段，则不应要求字段。有人在网站上建议，我应该使用"valueChanges“在字段上创建一个侦听器，然后在侦听器中实现逻辑。然后，在侦听器内部的逻辑之后，我调用方法"updateValueAndValidity()“。现在这里出现了问题。如果包含"updateValueAndValidity()“，则会得到错误：浏览器中的递归错误。我真的不明白为什么在这个问题上会出现递归错误，因为我不知道我在哪里有递归。可能"updateValueAndValidity()“再次触发我的侦听器。

如果我不包括"updateValueAndValidity()“，我就不会得到递归错误，但是逻辑不能工作。我不知道怎么解决这个问题，有人能帮我吗？

isFormEmtpy: boolean = true;
lieferadresseForm: FormGroup;
   
onChanges() {
        let street = this.lieferadresseForm.get('street');
        let streetNumber = this.lieferadresseForm.get('streetNumber');
        let zipCode = this.lieferadresseForm.get('zipCode');
    
        this.lieferadresseForm.valueChanges.subscribe(val => {
          console.log(val);
          this.isFormEmtpy = true;
          if(val.street !== '') {
            this.isFormEmtpy = false;
          } else if(val.streetNumber !== '') {
            this.isFormEmtpy = false;
          } else if(val.zipCode !== '') {
            this.isFormEmtpy = false;
          }
    
          if(this.isFormEmtpy == false) {
            street.setValidators([Validators.required, Validators.maxLength(36)]);
            streetNumber.setValidators([Validators.required, Validators.maxLength(10)]);
            zipCode.setValidators([Validators.required, Validators.maxLength(10)]);
          } else {
            street.setValidators([Validators.maxLength(36)]);
            streetNumber.setValidators([Validators.maxLength(10)]);
            zipCode.setValidators([Validators.maxLength(10)]);
          }

          strasse.updateValueAndValidity();
          hausnummer.updateValueAndValidity();
          postleitzahl.updateValueAndValidity();
            
        });
      }
    
      ngOnInit() {
        this.lieferadresseForm = this.formBuilder.group({
          street: ['', Validators.maxLength(36)],
          streetNumber: ['', Validators.maxLength(10)],
          zipCode: ['', Validators.maxLength(10)]
        });
            
        this.onChanges();
    }

Answer 1

您可以将{emitEvent:false}对象配置传递给updateValueAndValidity方法，以停止触发valueChanges可观测值。

尝试如下：

onChanges() {
        let street = this.lieferadresseForm.get('street');
        let streetNumber = this.lieferadresseForm.get('streetNumber');
        let zipCode = this.lieferadresseForm.get('zipCode');
    
        this.lieferadresseForm.valueChanges.subscribe(val => {
          console.log(val);
          this.isFormEmtpy = true;
          if(val.street !== '') {
            this.isFormEmtpy = false;
          } else if(val.streetNumber !== '') {
            this.isFormEmtpy = false;
          } else if(val.zipCode !== '') {
            this.isFormEmtpy = false;
          }
    
          if(this.isFormEmtpy == false) {
            street.setValidators([Validators.required, Validators.maxLength(36)]);
            streetNumber.setValidators([Validators.required, Validators.maxLength(10)]);
            zipCode.setValidators([Validators.required, Validators.maxLength(10)]);
          } else {
            street.setValidators([Validators.maxLength(36)]);
            streetNumber.setValidators([Validators.maxLength(10)]);
            zipCode.setValidators([Validators.maxLength(10)]);
          }

          strasse.updateValueAndValidity({emitEvent:false});
          hausnummer.updateValueAndValidity({emitEvent:false});
          postleitzahl.updateValueAndValidity({emitEvent:false});
            
        });
      }

Answer 2

您需要在updateValueAndValidity()上使用formControl。

yourForm.controls['controlName'].updateValueAndValidity();

在你的情况下这就像

lieferadresseForm.controls['streetNumber']..updateValueAndValidity();

Answer 3

问题是，您正在订阅表单值更改为onChange function.Basically，您在每个更改检测周期中都订阅表单更改，每次创建新订阅时都会创建，这将导致巨大的内存泄漏。

将您编写的代码移动到ngOnInit函数中，或者至少将调用一次的函数。

在这种情况下，您不需要处理onChange生命周期，因为您正在监听表单更改本身。