how can I check that the required input field is not empty, formControl cannot read the object...
public discountParamsForm = new FormGroup({
name: new FormControl('', Validators.required),
type: new FormControl('', Validators.required),
status: new FormControl('', Validators.required),
value: new FormControl('', [Validators.required, Validators.pattern(/^([0-9]{1,2}){1}(\.[0-9]{1,2})?$/),
Validators.min(1), Validators.max(100)]),
dateInput: new FormControl('', Validators.required),
categorySelect: new FormControl('', Validators.required)
});<input formControlName="dateInput" fullWidth type="text" [(ngModel)]="dateRange"
nbInput placeholder="{{pickDateUI}}" [nbDatepicker]="datepicker">
<nb-rangepicker (rangeChange)="onDateChange($event)" format="yyyy-MM-dd" #datepicker></nb-rangepicker>never, never use in the same tag [(ngModel)] and formControlName
Well, use a custom Validator.
discountParamsForm = new FormGroup({
...
dateInput: new FormControl('', this.validatorRange()),
})
validatorRange(){
return (control:AbstractControl)=>{
if (!control.value.start)
return {error:'start date is mandatory'}
if (!control.value.end)
return {error:'end date is mandatory'}
}
}
See that the control is always an object with properties "start" and "end" -so always has value, so in the custom validator we check if this properties has value or not-
A couple things here, you are looking at the form object itself. You can see on the image of the console, the entire form is INVALID.
If you want to see if one field in a form you can use the get method.
in your component
this.discountParamsForm.get('name');
this returns a FormControl object, and has values such as valid/invalid and many other use full indicators.
you can add a getter method in your component to check this in your html.
get name() {
return this.discountParamsForm.get('name');
}
<input [ngClass]="{'my-invalid-class': name.invalid}"
since we have a getter method we dont need to check the form directly and we can easily access the control inside the parent form.