Datepicker在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('replacedPolicyExpiredDate').valid。一旦我选择了第一个单选按钮，无论您切换哪个单选按钮，abcForm.get('replacedPolicyExpiredDate').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)
    ])
  });
}

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

如果直接点击第二个单选按钮（Plan option2）就可以了。替换后的PolicyExpiredDate 和abcForm 都有效。

谁能指出我错过了什么？

提前致谢！

Answer 1

我的团队成员刚刚找到了这个错误的原因。这与验证器无关。在 html 文件中，过期日期字段为 requiredField="true"。这是根本原因。