angular-wizard steps form validation for current step - angularjs

Question

I have a form with angular-wizard steps like below
While moving from one step to another step, we have to validate the current
step fields. But it validating all steps fields. How we can validate the present step fields instead of all fields?
<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

You can use nested formGroups to validate the current step fields instead of all fields. I am adding the sample code using angular-archwizard with step wise validation.
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);
}
hope this answer helps you.