在Angular

Question

我有两个无线电选项，在一个无线电下有一个日期选择器。事情是，当我点击带有datepicker的单选按钮（我正在替换我当前的计划）并切换到另一个单选按钮（计划选项2）时，datepicker仍然无效并导致我的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'）。无论你切换哪个单选按钮，有效总是显示为假。

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上有验证器，但现在我已经删除了该字段上的验证器。我不明白为什么这个字段仍然无效。一旦第一个单选按钮被点击，它似乎总是期待值。

如果你直接点击第二个单选按钮（Plan option2），那很好。 replacementPolicyExpiredDate和abcForm都有效。

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

提前致谢！