Required DatePicker in reactive form

Question

I have a reactive form with Datepicker

 <div class="form-group">
     <label class="form-control-label" for="field_dataAtivacao">Data Ativação</label>
     <div class="input-group">
         <input id="field_dataAtivacao" type="text" class="form-control" name="dataAtivacao" ngbDatepicker #dataAtivacaoDp="ngbDatepicker" formControlName="dataAtivacao"/>
         <span class="input-group-append">
             <button type="button" class="btn btn-secondary" (click)="dataAtivacaoDp.toggle()">
                 <fa-icon [icon]="'calendar-alt'"></fa-icon>
             </button>
         </span>
     </div>
 </div>

Form control without validator

editForm = this.fb.group({
    dataAtivacao: null,
});

The field is empty but always is required. I tried this solution but without success

EDIT

The above example works normally when I don't use the patch value method to update the form.

Like this example of the comments

The problem occurs when I need to update the form using the patchValue method.

this.editForm.patchValue({
    dataAtivacao: cliente.dataAtivacao,
});

When I change for null works normally but I need to show the date and allows update the form with the current selected

this.editForm.patchValue({
        dataAtivacao: null,
});

https://stackblitz.com/edit/angular-grybsk-vrnclb

Your code should work perfectly fine: https://stackblitz.com/edit/angular-grybsk?file=app/datepicker-basic.html Please provide a [mcve]. **Please also note to not use `ngModel` with formcontrol**. In my stackblitz it doesn't seem to cause any issue, but maybe on your end. — AT82, Oct 30 '19 at 12:48
I've identified the problem. It occurs when I use the patchValue method of form group. I will edit the question — renanvm, Oct 30 '19 at 16:04
So fork my stackblitz to showcase the issue. I don't understand why patchValue would cause such an issue? — AT82, Oct 30 '19 at 16:59

score 1 · Answer 1 · answered Oct 30 '19 at 12:12

1

Use this way

editForm = this.fb.group({
    dataAtivacao : ["", Validators.required]
})

answered Oct 30 '19 at 12:12

dasunse

2,839
1
14
32

Have you import ReactiveFormsModule – dasunse Oct 30 '19 at 12:42
@renanzin check https://stackblitz.com/edit/angular-material-date-picker-custom-date-format. Is it helpful. It is with custom date format also – dasunse Oct 31 '19 at 04:05

Required DatePicker in reactive form

1 Answers1