CODEWITHSUNDEEP
angulartypescriptangular-reactive-forms
Mohamad Mousheimish
Mohamad Mousheimish

Reputation: 1705

Angular form always invalid

I have an input with ngDatePicker and a submit button which is disabled as long as the form is not valid.

What's happening is that the form is always not valid! I've print the invalid form attribute and it's the date part.

I don't know why it's always giving me invalid, even tough I printed the form value after selecting the date and it have a date control name.

Anyone have an idea about the issue?

Here's how I'm building the form:

this.submitUserForm = formBuilder.group({
  email: [null, Validators.required],
  password: [null, Validators.required],
  firstName: [null, Validators.required],
  lastName: [null, Validators.required],
  date: [null, Validators.required],
  phoneNumber: [null, Validators.required],
  gender: [null, Validators.required],
  roles: [null, Validators.required]
});

And here's my HTML:

<input class="form-control" placeholder="Date of birth" name="dp" ngbDatepicker
      #d_2="ngbDatepicker" formControlName="date" (click)="d_2.toggle()" [maxDate]="maxDateValue"
      onkeydown="return false" (dateSelect)="onEndDateChange($event)">

Upvotes: 2

Views: 3603

Answers (3)

Ritik kaushik
Ritik kaushik

Reputation: 1

your angular form wants the input in string as something like "yyyy-mm-dd", but the output of ngdatepicker is an object like {year: yyyy, month: mm, day:dd} that is why the form is invalid. try using ngbDateParserFormatter.format(date coming from ngdatepicker) it will format the date in string. I hope it will work for you

Upvotes: 0

vsfDawg
vsfDawg

Reputation: 1527

This seems suspect: [maxDate]="minDateValue"

It appears that you are applying your minDateValue as the upper bound which makes reasonable input appear unreasonable.

Upvotes: 1

Neeraj Shende
Neeraj Shende

Reputation: 358

Whenever your date value is getting updated, try calling updateValueAndValidity method as follows.

this.submitUserForm .get(date).updateValueAndValidity();

This will emit the changes to all subscribers and will update the form status.

Upvotes: 0

Related Questions