Making next field disabled until previous is selsected - angular6

Question

ho to make input data field disabled in angular 6 until previous input data field is selected. Like I have one source field and one destination input field. So i want to make Destination field to be disabled until the Source is selected.

Answer 1

If I consider your source and destination input fields as Start Date and End Date input fields with type="date", then you can create the destionation field i.e. End Date field as readonly as shown below:
<input type="date" name="end_date" id="end_date" class="form-control" placeholder="* End Date" #endDate="ngModel" [(ngModel)]="end_date" required readonly>
And add a change function on your Source field i.e. Start Date field as shown below:
<input type="date" name="start_date" id="start_date" class="form-control" [min]="today" placeholder="* Start Date" [(ngModel)]="start_date == null ? '' :start_date" #startDate="ngModel" (change)="onDateChange($event)" required>
Now on your Component.ts file, create the same function (i.e. onDateChange($event)) to remove the readonly property from End Date field, which will execute whenever a change-event occur on Start Date field.
onDateChange(event) {
$("#end_date").prop('readonly', false);
}