在使用动态表单时,angular材料的mat-stepper出现问题。例如,我有一个带有3个步骤的stepper,每个步骤都有自己的表单。然而,第一步使用隐藏表单来确定它是否有效,因为此步骤可以动态地添加更多表单,因此将所有表单绑定到该步骤是不可能的。
当您在第一步时,您可以创建多个表单,并且一切都按预期工作,无需对新添加的表单进行任何随机验证。如果您转到第2或第3步,然后回到第1步并创建一个新表单,则所有字段都会自动以红色突出显示。
我尝试了许多不同的尝试来压制,但我没有成功。下面是我的第一步包含一个绑定到步骤控件的hiddenForm、一个默认表单和一个按钮来在该步骤中创建更多表单的基本示例。
我的研究试图修复这个问题使我相信,如果无效,材料stepper会使所有mat-form-fields变为红色,而不管是否新添加。
当您在第一步时,您可以创建多个表单,并且一切都按预期工作,无需对新添加的表单进行任何随机验证。如果您转到第2或第3步,然后回到第1步并创建一个新表单,则所有字段都会自动以红色突出显示。
我尝试了许多不同的尝试来压制,但我没有成功。下面是我的第一步包含一个绑定到步骤控件的hiddenForm、一个默认表单和一个按钮来在该步骤中创建更多表单的基本示例。
我的研究试图修复这个问题使我相信,如果无效,材料stepper会使所有mat-form-fields变为红色,而不管是否新添加。
<mat-horizontal-stepper [linear]="true">
<mat-step [stepControl]="hiddenForm" label="step 1"
<form [formGroup]="myForm">
<mat-form-field>
<mat-label>
First Name
</mat-label>
<input [formControl]="firstName"matInput>
<mat-error *ngIf="!firstName.valid && firstName.touched">
First Name required
</mat-error>
</mat-form-field>
</form>
<button (click)="AddNewForm()">Add New Form</button>
</mat-step>
</mat-horizontal-stepper>
失败的尝试: (当前表格是新添加的表格)
this.currentForm.markAsUntouched();
this.currentForm.markAsPristine();
this.currentForm.setErrors(null);
this.currentForm.reset();
this.currentForm.get('firstName).setErrors(null);
this.currentForm.get('firstName).reset();
this.currentForm.get('firstName).markAsPristine();
this.currentForm.get('firstName).markAsUntouched();
<mat-step [completed]="true" ..> ( on all steps )