仅在填写后如何验证字段

Question

我正在构建这个表单，它有一个不需要的字段，但是，如果用户输入他们的电话号码，我想对其进行验证并使其成为必填项。如果没有任何内容，则应删除所需的验证。

我有这个，但它不起作用。

private checkNum( ctrl: FormControl ) {
    let valid = false;

    if ( ctrl ) {
        ctrl.setValidators(Validators.required);

        if ( ctrl.value.length ) {
            const phoneNumber = this.phoneNumberUtil.parseAndKeepRawInput( ctrl?.value, 'us' );
            valid = this.phoneNumberUtil.isValidNumber(phoneNumber);
            if (validNumber) {
                this.validPhoneNum = this.phoneNumberUtil.format(phoneNumber, PhoneNumberFormat.E164);
                return null
            }
            return { required: 'Phone Invalid' }
        } 
        return { required: 'Phone Invalid' }
    } else {
        return ctrl.clearValidators();
    }
}

Answer 1

因此，为了更改控件的验证器，您需要执行以下操作：

// In your case: 

checkNum(ctrl: FormControl) {
   if (ctrl && ctrl.value) {
      ctrl.setValidators(Validators.required);
      ctrl.updateValueAndValidity(); // This line is important

       // Here you can do your functionality to match a regex and validate it   
   } else {
      ctrl.setValidators(null);
      ctrl.updateValueAndValidity(); // this line is important
   }

}