【发布时间】：2020-07-27 17:00:21
【问题描述】：
我在更新对话框中遇到了一个真正的问题，我有一个表单需要填写用户信息，但我发现了很多问题，例如：
1) 像 (DriverCode/CIN) 这样的具有验证数组的字段只有在我删除该字段并再次重新填充时才能被验证[提交按钮仍然禁用，当我删除字段和refill it], Rq 如果我点击其中一个字段然后点击另一个字段或在外面我发现 mat-error 火灾。例如，这里我在字段上有 [Validators.minLength(4),Validators.maxLength(4),Validators.required]，我在代码 Personne 字段内部单击而不是在外部单击。
2）我发现提交按钮仍然禁用，直到我更改或将数据放入日期选择器我不知道为什么！
我的 HTML：
<div mat-dialog-content class="p-16 pb-0 m-0" fusePerfectScrollbar>
<form [formGroup]="profileForm" class="event-form w-100-p" fxLayout="column" fxFlex>
<mat-form-field appearance="outline" class="w-100-p">
<mat-label>Nom*</mat-label>
<input matInput
formControlName="Nom_de_famille">
<mat-error>tu faux remplir ce champs.</mat-error>
</mat-form-field>
<div fxFlex="1 0 auto" fxLayout="column" fxLayout.gt-xs="row">
<mat-form-field appearance="outline" class="pr-sm-8" fxFlex="50">
<mat-label>Prénom*</mat-label>
<input matInput formControlName="Prénom">
<mat-error>tu faux remplir ce champs.</mat-error>
</mat-form-field>
<mat-form-field appearance="outline" class="pr-sm-8" fxFlex="50">
<mat-label>email*</mat-label>
<mat-error>L'email n'est pas valider.</mat-error>
<input matInput formControlName="email">
</mat-form-field>
</div>
<div fxFlex="1 0 auto" fxLayout="column" fxLayout.gt-xs="row">
<mat-form-field appearance="outline" class="pr-sm-8" fxFlex="50">
<mat-label>Code personnel*</mat-label>
<input matInput formControlName="Code_personnel">
<mat-error>Code personnel doit composer par 4 chiffres.</mat-error>
</mat-form-field>
<mat-form-field appearance="outline" class="pr-sm-8" fxFlex="50">
<mat-label>N de tel</mat-label>
<input matInput formControlName="N_tel">
</mat-form-field>
</div>
<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 fxFlex="1 0 auto" fxLayout="column" fxLayout.gt-xs="row">
<mat-form-field appearance="outline" class="pr-sm-8" fxFlex="50">
<mat-label>Lieu de naissance</mat-label>
<input matInput formControlName="lieu">
</mat-form-field>
<mat-form-field appearance="outline" class="pr-sm-8" fxFlex="50">
<mat-label>Adresse</mat-label>
<input matInput formControlName="adresse">
</mat-form-field>
</div>
<div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
<mat-form-field appearance="outline" fxFlex="100" required>
<mat-label>Departement*</mat-label>
<mat-select formControlName="Département" >
<mat-option *ngFor="let dept of departements" [value]="dept.id">{{dept.name}}</mat-option>
</mat-select>
<mat-icon matSuffix class="secondary-text">outlined_flag</mat-icon>
<mat-error>Selecter le departement</mat-error>
</mat-form-field>
</div>
<div fxFlex="1 0 auto" fxLayout="column" fxLayout.gt-xs="row">
<mat-form-field appearance="outline" class="pr-sm-8" fxFlex="100">
<mat-label>N° de CIN*</mat-label>
<input matInput formControlName="CIN">
<mat-error>le valeur de CIN n'est pas valider.</mat-error>
</mat-form-field>
</div>
<div fxFlex="1 0 auto" fxLayout="column" fxLayout.gt-xs="row">
<mat-form-field appearance="outline" class="pr-sm-8" fxFlex="50">
<mat-label>Genre du permis de conduire</mat-label>
<input matInput formControlName="Genre">
</mat-form-field>
<mat-form-field appearance="outline" class="pr-sm-8" fxFlex="50">
<mat-label>N° du permis du conduire</mat-label>
<input matInput formControlName="N_permis">
</mat-form-field>
</div>
<!--- <mat-select formControlName="Département" placeholder="Departement" [(ngModel)]="selected" class="drop_list">
<mat-option *ngFor="let dept of departements" [value]="dept.id">{{dept.name}}</mat-option>
<mat-error>Selecter un deparetement.</mat-error>
</mat-select>-->
</form>
</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>
我的组件.ts
export class EditNewChauffeursComponent implements OnInit {
profileForm = this.fb.group({
Nom_de_famille: ['' ,Validators.required],//
Prénom: ['' ,Validators.required],//
email: ['', [Validators.email,Validators.required]],//
Code_personnel: ['',[Validators.minLength(4),Validators.maxLength(4),Validators.required]],//Validators.required
N_tel: [''],
birthday: [],
adresse: [''],
lieu:[''],
CIN:['',[Validators.minLength(8),Validators.maxLength(8),Validators.required]],
Genre:[''],
N_permis:[''],
Département: ['',Validators.required]
});
constructor(private fb: FormBuilder) {
ngOnInit() {
if(this.indata==null){//New user
this.dialogTitle = "Ajouter un chauffeur";
}else{//Update user
this.dialogTitle = "Modifier un chauffeur";
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]
});
}
}
【问题讨论】：
标签： angular