本周遇到的问题

问题一

在写新增模块时遇到了这样一个问题——备用联系电话为非必填字段，那么在验证时就不用添加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);
        }
      }
    )
  }