为什么反应式表单验证无法在Angle中正常工作？

Question

我的reactive应用中有这样的angular表单

    this.firstFormGroup = this._formBuilder.group({
      phone: ['', Validators.required],
      otpcode: [''],
      companyName: ['', Validators.required],
      nTn: ['', Validators.required],
      brokerName: ['', Validators.required],
      refrences1: ['', Validators.required],
      refrences2: ['', Validators.required],
      refrences: [''],
      name: ['', Validators.required],
      cnic: ['', [Validators.required, Validators.minLength(13), Validators.maxLength(13)]],
      companynamepartnership: [''],
      partnershipcnic: [''],
      companynameproprietyship: [''],
      proprietyshipntn: [''],
      userTypeId: [3],
      insertedBy: [''],
      companyType: [''],
    });

现在，我在maxLength字段中添加minLength，required和cnic验证，因此在我的template cnic字段中看起来像这样< / p>

    <div class="form-group mb-1">
      <label>CNIC<span class="text-danger font-bold ml-1">*</span></label>
      <input formControlName="cnic" placeholder="xxxxxxxxx" type="text" class="form-control p-number"
      [ngClass]="{'is-invalid' : firstFormGroup.get('cnic').errors &&
      (firstFormGroup.get('cnic').touched || firstFormGroup.get('cnic').dirty)}" 
      (keypress)="vs.allowOnlyNumbers($event)"/>
      <span class="help-block" *ngIf="firstFormGroup.get('cnic').errors &&
      (firstFormGroup.get('cnic').touched || firstFormGroup.get('cnic').dirty)">
        <span *ngIf="firstFormGroup.get('cnic').errors?.required" class="text-danger">
        {{constants.errors.required.cnic}}
        </span>
       <span *ngIf="firstFormGroup.get('cnic').errors?.minlength || 
      firstFormGroup.get('cnic').errors?.maxlength" class="text-danger">
       {{constants.errors.required.cnicLength}}
       </span>
      </span>
    </div>

现在的问题是，当我focus cnic字段然后移到下一个字段而没有在cnic字段中输入任何内容时，它显示了required错误，但是当我关注cnic字段并在其中键入一些小于13的数字时，它不会向我显示模板中的minlength，maxlength错误。请参阅this视频以更好地理解。