[Angular] 讓錯誤訊息(getErrorMessage)配合驗證器(Validators)變動-使用updateValueAndValidity()和subscribe()

因為自訂的驗證器

在ngOnInit()中
所以只會呼叫一次表單

所以創建表單後
裡面的Validators就一直維持在0

因為Validators.minLength(0), Validators.maxLength(0)

  createCustomerForm() {
    this.customerForm = this.fb.group({
      quotaType: ['', Validators.required],
      customerAccount: [
        '',
        [Validators.required, Validators.minLength(0), Validators.maxLength(0)]
      ],
    
    });
  }

後面如果要再變更的話
需要讓前面發出指令讓後面知道需要執行

所以使用

.valueChanges.subscribe(res => { this.checkbusinessLength(); //根據條件判斷的函式 });

 ngOnInit() {
    this.createCustomerForm(); //初始表單內容
    this.customerForm.get('quotaType').valueChanges.subscribe(res => {
    this.checkbusinessLength(); //根據條件判斷的函式
    });
  }

   //根據條件判斷的函式 
   //如果選項是 選項A / 選項B / 沒東西 時判斷

  checkbusinessLength() {
   
    const oldBusinessType = this.customerForm.get('quotaType');

    switch (oldBusinessType.value) {
      case '選項A':
        this.customerForm.get('customerAccount').clearValidators();
        this.customerForm
          .get('customerAccount')
          .setValidators([
            Validators.required,
            Validators.minLength(7),
            Validators.maxLength(7)
          ]);
        this.customerForm.get('customerAccount').updateValueAndValidity();

        break;

      case '選項B':
        // this.customerForm.get('customerAccount').reset();

        this.customerForm.get('customerAccount').clearValidators();
        this.customerForm
          .get('customerAccount')
          .setValidators([
            Validators.required,
            Validators.minLength(8),
            Validators.maxLength(8)
          ]);
        this.customerForm.get('customerAccount').updateValueAndValidity();

        break;

      case null:
        this.customerForm.get('customerAccount').clearValidators();
        this.customerForm
          .get('customerAccount')
          .setValidators([Validators.maxLength(0), Validators.minLength(0)]);
        this.customerForm.get('customerAccount').updateValueAndValidity();

        break;
    }
  }

    });
  }

重點在於清掉原始.clearValidators()
和更新驗證.updateValueAndValidity()

這樣就可以讓使用者不需要清掉輸入內容就可以改變驗證器
而且錯誤訊息也能立即改變