Cant set reactive form value null

I'm using ngxDaterangepickerBootstrap to show calendar in a reactive form with a form control name call initialDate.

in component.ts

biller: new FormControl(null, [
Validators.required
]),
initialDate: new FormControl(null, [
Validators.required
])
});


in component.html

<input placeholder="Initial Date" name="initialDate" formControlName="initialDate" class="form-control"
ngxDaterangepickerBootstrap [locale]="singleCalendarLocale" [singleDatePicker]="true" [autoApply]="true"
[closeOnAutoApply]="true" (input)="clearDateControl('initialDate', $event)" />

<button class="btn btn-success" (click)="setAsCommited()" type="button" [disabled]="form.invalid">
<i class="fas fa-save"></i>
Save
</button>



In a form configuration I've been set initialDate as a required. The problem is that I've a register and want to edit after that delete the value of a initialDate.

I'm triying adding in a input call clearDateControl to set null

if (!event.target.value.trim()) {
this.form.controls[name].setValue(null);
console.log(this.form.controls[name].value);
}
}


but the value after delete initialDate in html and call clearDateControl, the console.log print:

{startDate: null, endDate: null}

And the form button to save is enable.

I´m try

reset
patchValue
setValue
empty object
undefined
empty string



How can I solve this problem? Set value to null when the input delete date and set the save button as a disabled because initialDate is required. Help pleasse.

Continue reading...