Trying to manage user accounts through a dialog form for adding and updating operations, where the type of operation is determined by a variable injected from the main component. Encountered an issue while launching the update process - the date picker triggered a validation error without any specific validation conditions set, resulting in the submit button being disabled. Check out the screenshot of the update form: https://i.sstatic.net/SWNHX.png
Below is the HTML code snippet:
<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 of Birth</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>
Here is the component.ts code snippet:
profileForm = this.fb.group({
Last_name: ['' ,Validators.required],
First_name: ['' ,Validators.required],
email: ['', [Validators.email,Validators.required]],
Personnel_code: [,Validators.compose( [Validators.min(1000), Validators.max(9999)])],
Phone_number: [''],
birthday: [''],
address: [''],
place_of_birth:[''],
ID_card:['',Validators.compose([Validators.min(10000000), Validators.max(99999999)])],
Gender:[''],
License_number:[''],
Department: ['',Validators.required]
});
constructor(public dialogRef: MatDialogRef<EditNewChauffeursComponent>, private fb: FormBuilder)
ngOnInit() {
this.setdefaultformvalues(this.indata.SendData);
}
setdefaultformvalues(row) {
this.profileForm.patchValue({
Last_name: [row.FirstName],
First_name: [row.LastName],
email: [row.Email],
Personnel_code: [row.DriverCode],
Phone_number: [row.Tel],
birthday: [''],
address: [row.Address],
place_of_birth:[row.BirthPlace],
ID_card:[row.CIN],
Gender:[row.DriverLicenseType],
License_number:[row.DriverLicenseNumber],
Department: [row.DepartmentId]
});
}