Search code examples
angulartypescriptvalidationdatepickerformbuilder

problem of date picker validation on update user data

I'm trying to add/update user accounts using a dialog form (add and update on some dialog and the system decide type of operation by a value of a variable injected by the main component to the dialog) the problem is when I tried to launch the update I found that my date picker launch validation error (but I didn't put any validation condition on it) and the submit button gets disabled here is a pic of my update form. enter image description here

and here the code my html:

        <form [formGroup]="profileForm" class="event-form w-100-p" fxLayout="column" fxFlex>
...
 <div fxFlex="1 0 auto" fxLayout="column" fxLayout.gt-xs="row">

                <mat-form-field appearance="outline" class="pr-sm-8" fxFlex="100">
                    <mat-label>Date de naissance</mat-label>
                    <input matInput [matDatepicker]="startDatePicker"  formControlName="birthday">
                    <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
                    <mat-datepicker #startDatePicker ></mat-datepicker>
                </mat-form-field>

            </div>
...
<div mat-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="end center">

        <button  mat-button color="primary"
                class="save-button"
                (click)="onaccept()"
                [disabled]="profileForm.invalid"
                aria-label="ADD">
                {{ActionType}}
        </button>

    </div>

component.ts:

profileForm = this.fb.group({
    Nom_de_famille: ['' ,Validators.required],//
    Prénom: ['' ,Validators.required],//
    email: ['', [Validators.email,Validators.required]],//
    Code_personnel: [,Validators.compose( [Validators.min(1000), Validators.max(9999)])],//Validators.required
    N_tel: [''],
    birthday: [''],
    adresse: [''],
    lieu:[''],
    CIN:['',Validators.compose([Validators.min(10000000), Validators.max(99999999)])],
    Genre:[''],
    N_permis:[''],
    Département: ['',Validators.required]
  });
  constructor(public dialogRef: MatDialogRef<EditNewChauffeursComponent>, private fb: FormBuilder)
  ngOnInit() {
       this.setdefaultformvalues(this.indata.SendData);
}
 setdefaultformvalues(row) {
    this.profileForm.patchValue({
      Nom_de_famille: [row.FirstName],
      Prénom: [row.LastName],
      email: [row.Email],
      Code_personnel: [row.DriverCode],
      N_tel: [row.Tel],
      birthday: [''],
      adresse: [row.Address],
      lieu:[row.BirthPlace],
      CIN:[row.CIN],
      Genre:[row.DriverLicenseType],
      N_permis:[row.DriverLicenseNumber],
      Département: [row.DepartmentId]
    });

  }
Solution

  • Inside setdefaultformvalues do this:

    birthday: null,

    instead of

    birthday: [''],