Angular - 如何驗證 Angular Material stepper 中的每一步

Question

在 Angular-12 中，我正在實施 Material Stepper。 它有兩 (2) 個步驟：

成分：

 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：

 <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> &nbsp; <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> &nbsp; <button mat-raised-button color="warn" (click)="stepper.reset()">Reset</button> </div> </mat-step> </mat-horizontal-stepper>

當觸摸每個 formControl 時，Material Stepper 工作正常。 它立即顯示錯誤。 但是當點擊Next Button時Step1（companyForm）中沒有填寫數據，雖然沒有移動到下一步或表單，但沒有顯示錯誤。

我希望它驗證每個步驟並在觸摸每個表單控件時顯示它。

我如何實現這一目標？

謝謝

Answer 1

我做的兩件事是將字段驗證設置為onBlur類的；

this.companyForm = this.fb.group({
      companyName: ['',
                   [Validators.required,
                    Validators.minLength(3),
                    Validators.maxLength(100)]]
    },
    { updateOn: "blur" });

...我個人不喜歡在必填字段有效之前允許繼續，所以我將步進器按鈕設置為禁用，直到它像；

<button mat-raised-button
        color="primary"
        matStepperNext
        [disabled]="companyForm.status != 'VALID'">
   Next
</button>

或者肯定看到曼哈頓先生下面的評論以驗證最后的表單，您可以通過將上面的{ updateOn: "blur" }從blur更改為submit來完成同樣的事情

Answer 2

材料似乎沒有將表單標記為已觸摸，因此我會重新綁定按鈕：

<button mat-raised-button color="primary" (click)="onFirstStepDone()">Next</button>

在組件中，您需要對步進器的引用：

@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();
}