[英]Angular - How to Validate each step in Angular Material stepper
In Angular-12, I am implementing Material Stepper.在 Angular-12 中,我正在实施 Material Stepper。 And it has two (2) steps:它有两 (2) 个步骤:
Component:成分:
export class SignupCompanyComponent implements OnInit { isLinear = true; isLoading = false; companySetupForm!: FormGroup; companyForm!: FormGroup; idForm!: FormGroup; ngOnInit() { this.companyForm = this.fb.group({ companyName: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(100)]] }); this.idForm = this.fb.group({ registrationNumber: ['', [Validators.required, Validators.maxLength(100)]], }); } get fc() { return this.companyForm.controls; }; get fi() { return this.idForm.controls; }; onSubmit() {} }
HTML: HTML:
<mat-horizontal-stepper [linear]="isLinear" #stepper labelPosition="bottom"> <mat-step [stepControl]="companyForm"> <form [formGroup]="companyForm"> <ng-template matStepLabel matStepperIcon="phone">Company Info</ng-template> <div class="col-12 col-md-12"> <div class="form-group"> <label for="name">Company Name:<span style="color:red;">*</span></label>} <input type="text" formControlName="companyName" placeholder="Company Name" class="form-control" required/> </div> <div *ngIf="fc.companyName.touched && fc.companyName.invalid"> <div *ngIf="fc.companyName.hasError('required')"> <div class="text-danger"> Company Name is required! </div> </div> <div *ngIf="fc.companyName.hasError('minlength')"> <div class="text-danger"> Company Name cannot be less than 3 characters! </div> </div> <div *ngIf="fc.companyName.hasError('maxlength')"> <div class="text-danger"> Company Name cannot be more than 100 characters! </div> </div> </div> </div> <div class="card-footer"> <button mat-raised-button color="primary" matStepperNext>Next</button> </div> </form> </mat-step> <mat-step [stepControl]="idForm"> <form [formGroup]="idForm"> <ng-template matStepLabel>Company ID</ng-template> <div class="col-12 col-md-4"> <div class="form-group"> <label for="registration_number">Registration Number:<span style="color:red;">*</span></label> <input type="text" formControlName="registrationNumber" placeholder="Registration Number" class="form-control" required/> </div> <div *ngIf="fi.registrationNumber.touched && fi.registrationNumber.invalid"> <div *ngIf="fi.registrationNumber.hasError('required')"> <div class="text-danger"> Company Reg. No. is required! </div> </div> <div *ngIf="fi.registrationNumber.hasError('maxlength')"> <div class="text-danger"> Company Reg. No. cannot be more than 100 characters! </div> </div> </div> </div> <div class="card-footer"> <button mat-raised-button color="black" matStepperPrevious>Back</button> <button mat-raised-button color="success" [disabled]="isLoading" type="submit" (click)="onSubmit()"> <span *ngIf="isLoading" class="spinner-border spinner-border-sm mr-1"></span> Submit </button> <button mat-raised-button color="warn" (click)="stepper.reset()">Reset</button> </div> </mat-step> </mat-horizontal-stepper>
When each formControl is touched, the Material Stepper works fine.当触摸每个 formControl 时,Material Stepper 工作正常。 It displays the error immediately.它立即显示错误。 But when Next Button is clicked no data is filled in Step1 (companyForm), though it didn't move to the next step or form, but no error is displayed.但是当点击Next Button时Step1(companyForm)中没有填写数据,虽然没有移动到下一步或表单,但没有显示错误。
I want it to validate each step and display as it is done when each form control is touched.我希望它验证每个步骤并在触摸每个表单控件时显示它。
How do I achieve this?我如何实现这一目标?
Thanks谢谢
Two things I do is set field validation to onBlur
like;我做的两件事是将字段验证设置为onBlur
类的;
this.companyForm = this.fb.group({
companyName: ['',
[Validators.required,
Validators.minLength(3),
Validators.maxLength(100)]]
},
{ updateOn: "blur" });
...and personally I don't like to allow continuing until the required fields are valid so I set the stepper button to disabled until it is like; ...我个人不喜欢在必填字段有效之前允许继续,所以我将步进器按钮设置为禁用,直到它像;
<button mat-raised-button
color="primary"
matStepperNext
[disabled]="companyForm.status != 'VALID'">
Next
</button>
Or definitely see Mr. Manhattan's comment below to validate the form at the end, which you can accomplish the same thing by changing the { updateOn: "blur" }
above from blur
to submit
或者肯定看到曼哈顿先生下面的评论以验证最后的表单,您可以通过将上面的{ updateOn: "blur" }
从blur
更改为submit
来完成同样的事情
Material doesn't seem to mark the form as touched, so i'd rebind the button:材料似乎没有将表单标记为已触摸,因此我会重新绑定按钮:
<button mat-raised-button color="primary" (click)="onFirstStepDone()">Next</button>
in the component, you'll need a reference to the stepper:在组件中,您需要对步进器的引用:
@ViewChild('stepper') stepper: MatHorizontalStepper;
onFirstStepDone() {
if(!this.companyForm .valid) {
// this should make all invalid fields light up in red
this.companyForm.markAllAsTouched();
return;
}
this.stepper.next();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.