满足角度9的条件时，全部时间验证失败

Question

使用设置验证器的一次条件的Am有效，但其形式无效。

 public phoneNumberTypes: any[] = [
        { number: 'Mobile' },
        { number: 'Home' },
        { number: 'Work' }
    ];

基于选择下拉更改，我以反应形式应用设置的验证器。

      pDetailsForm = this.formBuilder.group({
            firstName: new FormControl('', [Validators.minLength(0), Validators.maxLength(49), Validators.pattern('^[a-zA-Z]*$')]),
            lastName: new FormControl('', [Validators.required, Validators.maxLength(49), Validators.pattern('^[a-zA-Z]*$')]),
      phoneNumber: new FormControl('', []), phoneNumberTypes: new FormControl(this.phoneNumberTypes[0].number, []),});

   }


       public onphoneNumberChange(value:string):void{
            this.selectedNetworkType=value;
          if(value === 'Mobile' || value === 'Home'|| value === 'Work'){
            this.personalDetailsForm.get('phoneNumber').setValidators(Validators.required);

          }else{
            this.personalDetailsForm.get('phoneNumber').clearValidators();
          }
          this.personalDetailsForm.get('phoneNumber').updateValueAndValidity()
        }

  <div class=" form-group col-md-8">
                            <label> &nbsp;</label>
                            <input type="text"
                                   class="form-control"
                                   id="phoneNumber"
                                   placeholder=""
                                   form-control="phoneNumber">
                        </div>
                       g {pDetailsForm.get('phoneNumber').hasError('required')}}
                    </div>

<div class="form-group col-md-4  pr-4 pl-4">
                    <label for="pNo">phonenumber</label>
                    <select id="phoneNumber"
                            class="form-control"
                            formControlName="phoneNumberTypes"
                            #phoneNumber
                            (change)='onphoneNumberChange(phoneNumber.value)'>
                        <option value=""
                                disabled>select</option>
                        <option *ngFor="let numberType of phoneNumberTypes">
                            {{ numberType.number }}
                        </option>
                    </select>
                    <div class="text-danger"
                         *ngIf="submitted && pDetailsForm.controls.phoneNumberTypes.hasError('required')">
                        error
                    </div>
                </div>

我已填写电话号码字段，但条件仍未满足，但有效。

Answer 1

您想动态设置所需的反应形式控件。为此，我将创建自己的验证器，而不是尝试管理附加到控件的验证器列表。

首先，为了使控件更易于引用，我将分别声明它们。

controls: {
  phoneNumber: FormControl;
  type: FormControl;
};
form: FormGroup;
types = [
  'Mobile',
  'Home',
  'Work'
];  

我将声明自己的ValidatorFn，其中已注入了另一个控件。仅当注入的控件具有值而当前控件没有值时，验证器才会返回验证错误。

private requiredIf(target: AbstractControl, other: AbstractControl): ValidatorFn {
  other.valueChanges.subscribe(value => {
    target.updateValueAndValidity();
  });

  return (control: AbstractControl) => {
    return !other.value || control.value ? null : {
      required: 'true'
    };
  };
}

然后我将在ngOnInit()中设置控件。创建控件后，我必须设置验证器，以便可以使用引用。

ngOnInit() {
  this.controls = {
    phoneNumber: new FormControl(''), 
    type: new FormControl('')
  };

  this.controls.phoneNumber.setValidators([
    this.requiredIf(this.controls.phoneNumber, this.controls.type),
    Validators.pattern('\\d+')
  ]);

  this.form = this.formBuilder.group(this.controls);
}

HTML几乎是无关紧要的。我正在检查在窗体组之外声明的FormControl实例上的错误对象。

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <div>
    <label>Type</label>    
  </div>
  <div>
    <select formControlName="type">
      <option value="">Select</option>
      <option *ngFor="let type of types" [ngValue]="type">
        {{type}}
      </option>
    </select>
  </div>  

  <div>
    <label>Phone number</label>
  </div>
  <div>    
    <input formControlName="phoneNumber" />
  </div>  
  <div *ngIf="controls.phoneNumber.errors?.required">
    Required
  </div>
  <div *ngIf="controls.phoneNumber.errors?.pattern">
    Invalid pattern
  </div>

  <div>
    <button>Submit</button>
  </div>
</form>

DEMO：https://stackblitz.com/edit/angular-fz6jjq