关于angular:本周遇到的问题

问题一

在写新增模块时遇到了这样一个问题——备用联系电话为非必填字段，那么在验证时就不必增加 Validators.required 字段进行验证，然而因为是填写电话号码，就须要验证电话号码是否符合规范，然而在已有的验证电话号码办法中输出为空也会被验证为不符合规范，这也就导致了如果用 [disabled]="formGroup.invalid" 判断保留按钮是否可用与理论布局不同——即备用联系电话成了必填字段。于是我作了以下尝试。

一开始想着只须要像这样订阅备用联系电话变动，当其有内容时减少验证，没有内容时勾销验证。

this.formGroup.get(this.formKeys.alternatePhone).valueChanges.subscribe((value) => {if(value) {const alternatePhoneFormControl = new FormControl(value, YzValidators.isChinaMobileNumber);
          this.formGroup.setControl(this.formKeys.alternatePhone, alternatePhoneFormControl);
        } else {const newAlternatePhoneFormControl = new FormControl(value);
          this.formGroup.setControl(this.formKeys.alternatePhone, newAlternatePhoneFormControl);
        }
      }
    )

然而这样的话订阅局部代码只会在第一次输出数据时执行一次，之后再有变动便不再执行，对此集体猜想尽管这是通过 setControl() 扭转所订阅的 formControl，然而订阅关系并不会扭转，即这相当于新建了一个 formControl，咱们订阅的还是之前的 formComtrol 的变动。

之后我又想试试间接订阅整个 formGroup 的变动来实现所需要求

this.formGroup.get(this.formKeys.alternatePhone).valueChanges.subscribe((value) => {if(value) {const alternatePhoneFormControl = new FormControl(value, YzValidators.isChinaMobileNumber);
          this.formGroup.setControl(this.formKeys.alternatePhone, alternatePhoneFormControl);
        } else {const newAlternatePhoneFormControl = new FormControl(value, YzValidators.isChinaMobileNumber);
          this.formGroup.setControl(this.formKeys.alternatePhone, newAlternatePhoneFormControl);
        }
      }
    )

然而这样的话也显然是不对的，setControl()也扭转了 formGroup, 这也就导致进入了死循环。

最初我又尝试着把订阅办法独立进去，当咱们设置完 formControl 后再对咱们设置的 formControl 进行订阅，从而实现目标。

ngOnInit(): void {this.initFormGroup();
   this.subscribeAlternatePhoneChange(this.formGroup.get(this.formKeys.alternatePhone))
  }


 subscribeAlternatePhoneChange(formControl: AbstractControl): void {
    formControl.valueChanges.subscribe((value) => {console.log(value);
        if (value) {const alternatePhoneFormControl = new FormControl(value, YzValidators.isChinaMobileNumber);
          this.formGroup.setControl(this.formKeys.alternatePhone, alternatePhoneFormControl);
          this.subscribeAlternatePhoneChange(alternatePhoneFormControl);
        } else {const newAlternatePhoneFormControl = new FormControl(value);
          this.subscribeAlternatePhoneChange(newAlternatePhoneFormControl);
          this.formGroup.setControl(this.formKeys.alternatePhone, newAlternatePhoneFormControl);
        }
      }
    )
  }