在Angular中，Datepicker在空时显示无效

我有两个无线电选项，在一个无线电下有一个日期选择器 . 事情是，一旦我点击内置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（'replacementPolicyExpiredDate'） . 底部有效 . 一旦我选择了第一个单选按钮，abcForm.get（'replacementPolicyExpiredDate'） . 无论你切换哪个单选按钮，有效总是显示为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)
    ])
  });
}

我们曾经在replacementPolicyExpiredDate上有验证器，但现在我已经删除了该字段上的验证器 . 我不明白为什么这个字段仍然无效 . 单击第一个单选按钮后，它似乎一直期待值 .

如果你直接点击第二个单选按钮（计划选项2），那很好 . replacementPolicyExpiredDate和abcForm都有效 .

任何人都可以指出我失踪了吗？

提前致谢！