Datepicker продолжает показывать недействительным, когда пуст в Angular

Question

У меня есть два варианта радио, под одним радио есть DatePicker. Дело в том, что как только я нажимаю переключатель с датчиком внутри (я заменяю свой текущий план) и переключаюсь на другой переключатель (вариант плана 2), указатель даты остается недействительным и приводит к тому, что мой abcForm становится недействительным.

step2.component.html

<label>Please choose from one of the following:</label>
      <div class="radio">
        <label>
          <input type="radio" value="1" aria-label="..." formControlName="abcApplicationType">
          <span>I am replacing my current plan.</span>
        </label>
      </div>
      <div class="row padding-20" *ngIf="abcForm.get('abcApplicationType').value === '1'">
        <div class="row">
          <div class="col-md-8 form-group">
            <label>Company</label>
            <div [ngClass]="{ 'has-error' : !abcForm.get('Company').valid && (abcForm.get('Company').dirty || submitted)}">
              <input class="form-control" maxlength="50" formControlName="Company" />
            </div>
            <div class="errorMessage" *ngIf="!abcForm.get('Company').valid && (abcForm.get('Company').dirty || submitted)"> Company name is required</div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4 form-group">
            <label>Policy Number</label>
            <div [ngClass]="{ 'has-error' : !abcForm.get('replacedPolicyNumber').valid && (abcForm.get('replacedPolicyNumber').dirty || submitted)}">
              <input class="form-control" maxlength="50" formControlName="replacedPolicyNumber" />
            </div>
            <div class="errorMessage" *ngIf="!abcForm.get('replacedPolicyNumber').valid && (abcForm.get('replacedPolicyNumber').dirty || submitted)">Policy Number is required</div>
          </div>
          <div class="col-md-4 form-group">
            <label>Policy Expiry Date</label>
            <div class="input-group" [ngClass]="{ 'has-error' : !abcForm.get('replacedPolicyExpiredDate').valid && (abcForm.get('replacedPolicyExpiredDate').dirty || submitted)}">
              <app-datepicker class="datepicker" minDate="today" formControlName="replacedPolicyExpiredDate" [yearNavigator]="true" [monthNavigator]="true" requiredField="true"></app-datepicker>
              <span class="input-group-addon datepicker-icon"><i class="fa fa-calendar"></i></span>
            </div>
            <div class="errorMessage" *ngIf="abcForm.get('replacedPolicyExpiredDate').hasError('replacementPlanValidatorRequired') && (abcForm.get('replacedPolicyExpiredDate').dirty || submitted)">Policy Expired Date is required</div>
            <div class="errorMessage" *ngIf="abcForm.get('replacedPolicyExpiredDate').hasError('replacementPlanInfoInvalidDate') && (abcForm.get('replacedPolicyExpiredDate').dirty || submitted)">Invalid Date</div>
            <div class="errorMessage" *ngIf="abcForm.get('replacedPolicyExpiredDate').hasError('dateLessThanTodayError') && (abcForm.get('replacedPolicyExpiredDate').dirty || submitted)">Effective date cannot be less than today's date</div>
          </div>
        </div>
      </div>
      <div class="radio">
        <label>
          <input type="radio" value="2" aria-label="..." formControlName="abcApplicationType">
          <span>Plan option 2</span>
        </label>
      </div>
<div>DEBUG get('replacedPolicyExpiredDate') valid?: {{abcForm.get('replacedPolicyExpiredDate').valid}}</div>

Я выводил abcForm.get('replacePolicyExpiredDate'). Действительный внизу. Когда я выбираю первую радиокнопку, abcForm.get('replacePolicyExpiredDate'). Valid всегда показывает false независимо от того, какую радиокнопку вы переключили.

step2.component.ts

initializeForm() {
const model = this.model;
const appInfo = model.abcApplicationInformation;
const contactInfo = appInfo.contactInformation;

this.abcForm = this.fb.group({
  ...
  abcApplicationType: [appInfo.abcApplicationType],
  insuredInCanada: [appInfo.insuredInCanada, Validators.required],
  Company: [appInfo.Company, this.validator.replacementPlanInfoRequiredValidator.bind(this)],
  replacedPolicyNumber: [appInfo.replacedPolicyNumber, this.validator.replacementPlanInfoRequiredValidator.bind(this)],
  replacedPolicyExpiredDate: appInfo.replacedPolicyExpiredDate ,
  applicants: this.buildApplicantArray(),
}, {
    validator: Validators.compose([
      this.validator.matchingEmails('emailAddress', 'confirmEmailAddress').bind(this.abcForm),
      this.validator.isabcApplicationTypeSelected.bind(this),
      customValidators.requiredIfControlValueIsTruthy('emailAddress', 'confirmEmailAddress'),
      this.isSponsorQuestionRequired.bind(this)
    ])
  });
}

Раньше мы использовали валидаторы для replacePolicyExpiredDate, но теперь я уже удалил валидаторы в этом поле. Я не понимаю, почему это поле все еще недействительно. Кажется, ожидаемое значение все время, как только щелкнул первый переключатель.

Если вы нажмете на второй переключатель (Plan option 2) напрямую, это нормально. Оба параметра replacePolicyExpiredDate и abcForm действительны.

Кто-нибудь может указать мне, что я пропустил?

Заранее спасибо!

Answer 1

Мой член команды только что нашел причину этой ошибки. Это не имеет ничего общего с валидаторами. В html-файле для поля истечения срока действия обязательно требуется поле ="истина". Это коренная причина.