CODEWITHSUNDEEP
angularformsdatepickerbootstrap-datepickerangular-validation
Julie C.
Julie C.

Reputation: 659

Datepicker keeps showing invalid when empty in Angular

I have two radio options, under one radio there is a datepicker. The thing is once I click on the radio button with datepicker inside (I am replacing my current plan) and switch to another radio button (Plan option 2), the datepicker is still invalid and resulted my abcForm invalid.

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>

I output the abcForm.get('replacedPolicyExpiredDate').valid at the bottom. Once I choose the first radio button, the abcForm.get('replacedPolicyExpiredDate').valid always shows false no matter which radio button you switched.

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)
    ])
  });
}

We used to have validators on replacedPolicyExpiredDate, but now I removed validators on that field already. I don't understand why this field is still invalid. It seems expecting value all the time once the first radio button clicked.

If you click on the second radio button (Plan option2) directly, it's fine. Both the replacedPolicyExpiredDate and abcForm are valid.

Can anyone point me what I have been missing?

Thanks in advance!

Upvotes: 1

Views: 2097

Answers (1)

Julie C.
Julie C.

Reputation: 659

My team member just found the cause of this bug. It's nothing to do with validators. In the html file, there is requiredField="true" for the expiry date field. That's the root cause.

Upvotes: 2

Related Questions