2 years ago

#35100

test-img

Cheng Shi

Validation of NG-ZORRO select dropdown doesn't work

I have a NG-ZORRO reactive form. I have an issue adding Validation to my select

The form looks like the following:

<nz-form-control  nzErrorTip="{{formValidatorSvc.getErrorMessage(form.get('type').errors)}}">
    <nz-form-label nzFor="type" nzRequired>Deal Type</nz-form-label>
    <nz-select nzAllowClear name="type" formControlName="type">
        <nz-option *ngFor="let t of types" [nzLabel]="t" [nzValue]="t" ></nz-option>
    </nz-select>
</nz-form-control>
<nz-form-control nzErrorTip="{{formValidatorSvc.getErrorMessage(form.get('agreement').errors)}}">
    <nz-form-label nzFor="agreement" nzRequired>Agreement Name</nz-form-label>
    <input nz-input name="agreement" formControlName="agreement">
</nz-form-control>

And this is my .ts file form creation part

this.form = this.fb.group({
  type: new FormControl(null, [Validators.required]),  
  agreement: new FormControl(null),
})

When I load my form, I see the following error in my browser console enter image description here

Just to make it clear, if I remove the validation rule for my type this error is gone. Or, if I add the validation rule to another input field, there is no error as well. It seems like this error only occurs with nz-select. I wonder what I have done wrong ?

angular

angular-reactive-forms

ng-zorro-antd

0 Answers

Your Answer

Accepted video resources