0

In below angular-2 code I am using a dropdown inside a form which is required field , if i use the validation on the value field of the dropdown it works fine but i want the value and text both should not be null or empty, how can i add the required validation on text of a drop also.

HTML

<select formControlName="PayPeriodId" placeholder="Pay Period" required>
<option *ngFor="let PayPeriod of payPeriodList" [value]="PayPeriod.Id">
        {{PayPeriod.Name}}
      </option>
    </select>

Component

let employeePersonalDetail : new PersonalDetailResponseModel();
 this.editEmployeeForm = this.formBuilder.group({
  PayPeriodId: [employeePersonalDetail.PayPeriodId, Validators.required]
});
Mohan Singh
  • 1,142
  • 3
  • 15
  • 30
  • In a "dropdown" (` – Florian Dec 12 '18 at 09:57
  • actually the payperiod gets expired after an interval of time so the when i open the form in edit mode the value field of a dropdown contains a value but text field does not so the validation does not work. – Mohan Singh Dec 12 '18 at 10:04
  • The problem is, if your time is expired you shouldn't display elements, or you should add a validator that verifies the time is not expired..? – Florian Dec 12 '18 at 10:09
  • You could read the docs https://angular.io/guide/form-validation#cross-field-validation – Jscti Dec 12 '18 at 10:13
  • @Florian we don't display the expired element in dropdown but its id remain in employee table which gets bind in value of payperiod field of dropdown. – Mohan Singh Dec 12 '18 at 10:21
  • @MohanSingh create a `BehaviorSubject` (example : `payPeriodList$`), when you receive data from your service, you notify observers `payPeriodList$.next(res)`. When you timeout, you notify observers `payPeriodList$.next([])`. In your template, you modify your option : `*ngFor="let PayPeriod of payPeriodList$ | async"`. – Florian Dec 12 '18 at 10:28
  • Will try this @Florian – Mohan Singh Dec 12 '18 at 10:30

0 Answers0