向导步骤对当前步骤进行验证

Question

我有一个带有如下所示的角向导步骤的表单

从一个步骤转到另一个步骤时，我们必须验证当前 步骤字段。但是它会验证所有步骤字段。我们如何验证当前步骤字段而不是所有字段？

<form name="User" novalidate>
    <wizard on-finish="saveUser()">
        <wz-step title="Starting" canexit="exitValidation">
            <h1>This is the first step</h1>
            <input type="text" required name="Field1"/>
            <input type="submit" wz-next="" value="Continue" />
        </wz-step>
        <wz-step title="Continuing" canenter="enterValidation" canexit="exitValidation">
            <h1>This is the second step</h1>
            <input type="text" required name="Field2"/>
            <input type="submit" wz-next="" value="Continue" />
        </wz-step>
        <wz-step title="Continuing" canenter="enterValidation" canexit="exitValidation">
            <h1>This is the third step</h1>
            <input type="text" required name="Field3"/>
            <input type="submit" wz-next="" value="Continue" />
        </wz-step>
    </wizard>
</form>

Answer 1

您可以使用嵌套的formGroups来验证当前步骤字段，而不是所有字段。我使用带有逐步验证的angular-archwizard添加示例代码。

Component.html：

<form [formGroup]="userForm" (ngSubmit)="userFormSubmit()">
    <aw-wizard [navBarLayout]="'large-empty-symbols'">
        <!-- Step 1 -->
        <aw-wizard-step formGroupName="personalDetailsGroup" stepTitle="Personal Info" [navigationSymbol]="{ symbol: '1', fontFamily: 'FontAwesome' }">
            <div class="row">
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="first_name">First Name* :</label>
                        <input type="text" class="form-control" formControlName="first_name">
                        <div *ngIf="form.personalDetailsGroup['controls'].first_name.invalid && (form.personalDetailsGroup['controls'].first_name.dirty || form.personalDetailsGroup['controls'].first_name.touched)">
                            <span *ngIf="form.personalDetailsGroup['controls'].first_name.errors.required">Please enter first name</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="last_name">Last Name* :</label>
                        <input type="text" class="form-control" formControlName="last_name">
                        <div *ngIf="form.personalDetailsGroup['controls'].last_name.invalid && (form.personalDetailsGroup['controls'].last_name.dirty || form.personalDetailsGroup['controls'].last_name.touched)">
                            <span *ngIf="form.personalDetailsGroup['controls'].last_name.errors.required">Please enter last name</span>
                        </div>
                    </div>
                </div>                                                                                                               
            </div>
            <div class="row">
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="email">Email Address* :</label>
                        <input type="email" class="form-control" formControlName="email" required>
                        <div *ngIf="form.personalDetailsGroup['controls'].email.invalid && (form.personalDetailsGroup['controls'].email.dirty || form.personalDetailsGroup['controls'].email.touched)">
                            <span *ngIf="form.personalDetailsGroup['controls'].email.errors.required">Please enter email address</span>
                            <span *ngIf="form.personalDetailsGroup['controls'].email.errors.email">Please enter valid email address</span>
                        </div>
                    </div>
                </div> 
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="mobile_number">Mobile Number* :</label>
                        <input type="tel" class="form-control" formControlName="mobile_number" required>
                        <div *ngIf="form.personalDetailsGroup['controls'].mobile_number.invalid && (form.personalDetailsGroup['controls'].mobile_number.dirty || form.personalDetailsGroup['controls'].mobile_number.touched)">
                            <span *ngIf="form.personalDetailsGroup['controls'].mobile_number.errors.required">Please enter mobile number</span>
                        </div>
                    </div>
                </div>
            </div>
            <button class="btn btn-primary" type="button" [disabled]="form.personalDetailsGroup.invalid" awNextStep>Next</button>
        </aw-wizard-step>
        <!-- Step 2 -->
        <aw-wizard-step formGroupName="contactDetailsGroup" stepTitle="Contact Info">
            <div class="row">
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="phone_number">Phone Number :</label>
                        <input type="tel" class="form-control" formControlName="phone_number">
                        <div *ngIf="form.contactDetailsGroup['controls'].phone_number.invalid && (form.contactDetailsGroup['controls'].phone_number.dirty || form.contactDetailsGroup['controls'].phone_number.touched)">
                            <span *ngIf="form.contactDetailsGroup['controls'].phone_number.errors.pattern">Please enter valid phone number</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="city">City* :</label>
                        <input type="text" class="form-control" formControlName="city" required>
                        <div *ngIf="form.contactDetailsGroup['controls'].city.invalid && (form.contactDetailsGroup['controls'].city.dirty || form.contactDetailsGroup['controls'].city.touched)">
                            <span *ngIf="form.contactDetailsGroup['controls'].city.errors.required">Please enter city name</span>
                        </div>
                    </div>
                </div>
            </div> 
            <div class="row">
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="state">State* :</label>
                        <input type="text" class="form-control" formControlName="state" required>
                        <div *ngIf="form.contactDetailsGroup['controls'].state.invalid && (form.contactDetailsGroup['controls'].state.dirty || form.contactDetailsGroup['controls'].state.touched)">
                            <span *ngIf="form.contactDetailsGroup['controls'].state.errors.required">Please enter state name</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="country">Country* :</label>
                        <input type="text" class="form-control" formControlName="country" required>
                        <div *ngIf="form.contactDetailsGroup['controls'].country.invalid && (form.contactDetailsGroup['controls'].country.dirty || form.contactDetailsGroup['controls'].country.touched)">
                            <span *ngIf="form.contactDetailsGroup['controls'].country.errors.pattern">Please enter country name</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="pincode">Pincode* :</label>
                        <input type="tel" class="form-control" formControlName="pincode" required>
                        <div *ngIf="form.contactDetailsGroup['controls'].pincode.invalid && (form.contactDetailsGroup['controls'].pincode.dirty || form.contactDetailsGroup['controls'].pincode.touched)">
                            <span *ngIf="form.contactDetailsGroup['controls'].pincode.errors.required">Please enter pincode</span>
                        </div>
                    </div>
                </div>
            </div>  
            <div class="row">
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="address1">Address1* :</label>
                        <textarea class="form-control" formControlName="address1" required></textarea>
                        <div *ngIf="form.contactDetailsGroup['controls'].address1.invalid && (form.contactDetailsGroup['controls'].address1.dirty || form.contactDetailsGroup['controls'].address1.touched)">
                            <span *ngIf="form.contactDetailsGroup['controls'].address1.errors.required">Please enter address</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="address2">Address2* :</label>
                        <textarea class="form-control" formControlName="address2" required></textarea>
                        <div *ngIf="form.contactDetailsGroup['controls'].address2.invalid && (form.contactDetailsGroup['controls'].address2.dirty || form.contactDetailsGroup['controls'].address2.touched)">
                            <span *ngIf="form.contactDetailsGroup['controls'].address2.errors.required">Please enter address</span>
                        </div>
                    </div>
                </div>
            </div>                                                    
            <button class="btn btn-secondary" type="button" awPreviousStep>Previous</button>
            <button class="btn btn-primary" type="button" [disabled]="form.contactDetailsGroup.invalid" awNextStep>Next</button>
        </aw-wizard-step>
        <aw-wizard-step stepTitle="Title of step 3">
            Content of Step 3
            <button class="btn btn-secondary" type="button" awPreviousStep>Previous</button>
            <button class="btn btn-primary" type="submit" [disabled]="form.personalDetailsGroup.invalid || form.contactDetailsGroup.invalid">Submit</button>
        </aw-wizard-step>
    </aw-wizard>
</form>

Component.ts：

Add these below lines of code to define the nested formGroups.

ngOnInit(): void {    
    this.userForm = this.formBuilder.group({
      personalDetailsGroup: this.formBuilder.group({
        first_name: ['', [Validators.required]],
        last_name: ['', [Validators.required]],
        email: ['', [Validators.required, Validators.email]],
        mobile_number: ['', [Validators.required, Validators.pattern(mobileRegx)]],
      }),
      contactDetailsGroup: this.formBuilder.group({
        city: ['', [Validators.required]],
        state: ['', [Validators.required]],
        country: ['', [Validators.required]],
        pincode: ['', [Validators.required]],
        address1: ['', [Validators.required]],
        address2: ['', [Validators.required]],
      })
    })
  }

  get form() { return this.userForm.controls; }

  userFormSubmit(){
    const personalDetails = this.addVendorForm.get('personalDetailsGroup').value;
    const contactDetails = this.addVendorForm.get('contactDetailsGroup').value;
    const totalFormData = Object.assign({}, personalDetails, contactDetails);
  }

希望此答案对您有帮助。