In my Angular application, I need to utilize two fields - produced date and expiry date.
It is important to note that I must use <div [formGroup]...> since this component will be called within other forms. Using the form tag here is not an option.
Below is the implementation of MyFilter.component.ts:
export class MyFilterComponent {
filterForm: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.filterForm = formBuilder.group({
producedDate: ['', [Validators.required]],
expiryDate: ['', [Validators.required]]
});
}
}
Additionally, here is the content of my-filter.component.html:
<div [formGroup]="filterForm">
<div class="form-group">
<label for="producedDate"> Produced Date</label>
<input type="date" formControlName="producedDate" class="form-control">
<div class="alert alert-danger" name="producedDateRequiredWarning"
*ngIf="filterForm.get('producedDate').errors && filterForm.get('producedDate').touched">
Field is Required.
</div>
</div>
<div>
<label for="expiryDate"> Expiry Date</label>
<input type="date" formControlName="expiryDate" class="form-control">
<div class="alert alert-danger" name="expiryDateRequiredWarning"
*ngIf="filterForm.get('expiryDate').errors && filterForm.get('expiryDate').touched">
Field is Required.
</div>
</div>
</div>
Currently, when a validation fails (e.g., the user touches the produced date field but does not input anything), the entire left border gets highlighted in red. Is there a way to resolve this without having to override the CSS?