更新用户数据时日期选择器验证的问题
problem of date picker validation on update user data
我正在尝试 add/update 使用对话框表单的用户帐户(在某些对话框上添加和更新,系统通过主要组件注入到对话框的变量值来决定操作类型)问题是当我尝试启动更新时,我发现我的日期选择器启动验证错误(但我没有在其上设置任何验证条件)并且提交按钮被禁用这里是我的更新表单的图片。
这里是我的代码 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]
});
}
在 setdefaultformvalues
中执行此操作:
birthday: null,
而不是
birthday: [''],
你能不能在填充后添加 profileForm 的控制台日志并检查其中的控件对象你会在那里看到你的所有控件然后检查生日控件你会在其中看到错误键检查错误是什么
[这是一个例子]
我正在尝试 add/update 使用对话框表单的用户帐户(在某些对话框上添加和更新,系统通过主要组件注入到对话框的变量值来决定操作类型)问题是当我尝试启动更新时,我发现我的日期选择器启动验证错误(但我没有在其上设置任何验证条件)并且提交按钮被禁用这里是我的更新表单的图片。
这里是我的代码 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]
});
}
在 setdefaultformvalues
中执行此操作:
birthday: null,
而不是
birthday: [''],
你能不能在填充后添加 profileForm 的控制台日志并检查其中的控件对象你会在那里看到你的所有控件然后检查生日控件你会在其中看到错误键检查错误是什么
[这是一个例子]