【发布时间】：2023-03-04 14:33:01
【问题描述】：
我正在使用 Angular-7。我正在使用 angular-archwizard 制作多步表单，目前它允许我在不输入必填字段的所有值的情况下进入下一步，我不想允许，如果我输入了值，我想进入下一步所有必填字段。
<form class="form-clientquote" #clientquoteForm=ngForm (ngSubmit)="onSubmit()">
<aw-wizard #wizard [navBarLayout]="'large-empty-symbols'">
<aw-wizard-step [stepTitle]="'Transaction Details'" [navigationSymbol]="{ symbol: '', fontFamily: 'FontAwesome' }">
<div class="centered-content">
<div class="row">
<div class="col-xs-12">
<div class="col-xs-6">
<label for="quote_origin" >Origin<span style="color:red;"> *</span></label>
<input type="text" class="form-control" id="quote_origin" google-place
(onSelect)="setAddress($event)" placeholder="Origin" name="quote_origin" [(ngModel)]="form.quote_origin" #quote_origin="ngModel" [ngClass]="{'is-invalid' : quote_origin.invalid && ((quote_origin.dirty || quote_origin.touched) || clientquoteForm.submitted)}" required>
<div class="form-feedback" *ngIf="quote_origin.invalid && ((quote_origin.dirty || quote_origin.touched) || clientquoteForm.submitted)" class="invalid-feedback">
<div style="color:red;" *ngIf="quote_origin.errors?.required"class="alert alert-danger">Origin is required.</div>
</div>
</div>
<div class="col-xs-6">
<label for="quote_destination">Destination<span style="color:red;"> *</span></label>
<input type="text" class="form-control" id="quote_destination" google-place
(onSelect)="setAddress($event)" placeholder="Destination" name="quote_destination" [(ngModel)]="form.quote_destination" #quote_destination="ngModel" [ngClass]="{'is-invalid' : quote_destination.invalid && ((quote_destination.dirty || quote_destination.touched) || clientquoteForm.submitted)}" required>
<!-- <ul style="list-style-type: none;">
<li *ngFor="let key of addrKeys">
<span style="font-weight: bold">{{key}}</span>: <span>{{addr[key]}}</span>
</li>
</ul> -->
<div class="form-feedback" *ngIf="quote_destination.invalid && ((quote_destination.dirty || quote_destination.touched) || clientquoteForm.submitted)" class="invalid-feedback">
<div style="color:red;" *ngIf="quote_destination.errors?.required"class="alert alert-danger">Destination is required.</div>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-6">
<label for="commodity">Commodity<span style="color:red;"> *</span></label>
<input type="text" class="form-control" id="commodity" placeholder="Commodity" name="commodity" [(ngModel)]="form.commodity" #commodity="ngModel" [ngClass]="{'is-invalid' : commodity.invalid && ((commodity.dirty || commodity.touched) || clientquoteForm.submitted)}" required>
<div class="form-feedback" *ngIf="commodity.invalid && ((commodity.dirty || commodity.touched) || clientquoteForm.submitted)" class="invalid-feedback">
<div style="color:red;" *ngIf="commodity.errors?.required"class="alert alert-danger">Commodity is required.</div>
</div>
</div>
<div class="col-xs-6">
<label for="truck_type">Truck Type<span style="color:red;"> *</span></label>
<select class="form-control select2" style="width: 100%;" [(ngModel)]="form.truck_type" #truckType="ngModel" name="truck_type" required>
<option [ngValue]="null">Choose a Truck Type</option>
<option [ngValue]="truck_type" *ngFor="let truck_type of truck_types">{{truck_type}}</option>
</select>
<div class="form-feedback" *ngIf="truckType.invalid && ((truckType.dirty || truckType.touched) || clientquoteForm.submitted)">
<div style="color:red;" class="alert alert-danger">Truck Type is required.</div>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-6">
<label for="truck_required">Required Truck(s)<span style="color:red;"> *</span></label>
<input type="number" (keypress)="numberOnly($event)" class="form-control" id="truck_required" placeholder="1,2,3..." min="1" max="20" name="truck_required" [(ngModel)]="form.truck_required" #truck_required="ngModel" [ngClass]="{'is-invalid' : truck_required.invalid && ((truck_required.dirty || truck_required.touched) || clientquoteForm.submitted)}" required maxlength="2">
<div class="form-feedback" *ngIf="truck_required.invalid && ((truck_required.dirty || truck_required.touched) || clientquoteForm.submitted)" class="invalid-feedback">
<div style="color:red;" *ngIf="truck_required.errors?.required"class="alert alert-danger">Required Truck(s) is required.</div>
</div>
</div>
<div class="col-xs-6">
<label for="loading_date">Loading Date<span style="color:red;"> *</span></label>
<div class="input-group date" style="width: 100%;" >
<mat-form-field>
<input matInput [matDatepicker] = "picker" placeholder = "Choose a date" name="loading_date" [(ngModel)]="form.loading_date" #loading_date="ngModel" [ngClass]="{'is-invalid' : loading_date.invalid && ((loading_date.dirty || loading_date.touched) || clientquoteForm.submitted)}" required>
<mat-datepicker-toggle matSuffix [for] = "picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<div class="form-feedback" *ngIf="loading_date.invalid && ((loading_date.dirty || loading_date.touched) || clientquoteForm.submitted)">
<div style="color:red;" *ngIf="loading_date.errors?.required"class="alert alert-danger">Loading Date is required.</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-12">
<label for="comment">Comment</label>
<input class="form-control" placeholder="Comment" type="textarea" id="comment" name="comment" [(ngModel)]="form.comment" #comment="ngModel" >
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-12">
<div class="btn-group">
<button type="button" class="btn btn-primary" awNextStep> Next ></button>
</div>
</div>
</div>
</div>
</div>
</aw-wizard-step>
<aw-wizard-step [stepTitle]="'Personal Details'" [navigationSymbol]="{ symbol: '', fontFamily: 'FontAwesome' }">
<div class="centered-content">
<div class="row">
<div class="col-xs-12">
<div class="col-xs-6">
<label for="first_name">First Name<span style="color:red;"> *</span></label>
<input type="text" class="form-control" id="first_name" placeholder="First Name" name="first_name" [(ngModel)]="form.first_name" #first_name="ngModel" [ngClass]="{'is-invalid' : first_name.invalid && ((first_name.dirty || first_name.touched) || clientquoteForm.submitted)}" required>
<div class="form-feedback" *ngIf="first_name.invalid && ((first_name.dirty || first_name.touched) || clientquoteForm.submitted)" class="invalid-feedback">
<div style="color:red;" *ngIf="first_name.errors?.required" class="alert alert-danger">First Name is required.</div>
</div>
</div>
<div class="col-xs-6">
<label for="last_name">Last Name<span style="color:red;"> *</span></label>
<input type="text" class="form-control" id="last_name" placeholder="Last Name" name="last_name" [(ngModel)]="form.last_name" #last_name="ngModel" [ngClass]="{'is-invalid' : last_name.invalid && ((last_name.dirty || last_name.touched) || clientquoteForm.submitted)}" required>
<div class="form-feedback" *ngIf="last_name.invalid && ((last_name.dirty || last_name.touched) || clientquoteForm.submitted)" class="invalid-feedback">
<div style="color:red;" *ngIf="last_name.errors?.required"class="alert alert-danger">Last Name is required.</div>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-6">
<label for="business_name">Business Name<span style="color:red;"> *</span></label>
<input type="text" class="form-control" id="business_name" placeholder="Business Name" name="business_name" [(ngModel)]="form.business_name" #business_name="ngModel" [ngClass]="{'is-invalid' : business_name.invalid && ((business_name.dirty || business_name.touched) || clientquoteForm.submitted)}" required>
<div class="form-feedback" *ngIf="business_name.invalid && ((business_name.dirty || business_name.touched) || clientquoteForm.submitted)" class="invalid-feedback">
<div style="color:red;" *ngIf="business_name.errors?.required"class="alert alert-danger">Business Name is required.</div>
</div>
</div>
<div class="col-xs-6">
<label for="address">Office Address</label>
<input class="form-control" google-place
(onSelect)="setAddress($event)"placeholder="address" type="text" id="address" name="address" [(ngModel)]="form.address" #address="ngModel" >
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-6">
<label for="phone">Phone<span style="color:red;"> *</span></label>
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-phone"></i>
</div>
<input type="text"
class="form-control"
id="phone"
placeholder="Phone"
name="phone"
[(ngModel)]="form.phone"
#phone="ngModel"
pattern="^[+-]?[0-9]*\.?[0-9]*"
[ngClass]="{'is-invalid' : phone.invalid && ((phone.dirty || phone.touched) || clientquoteForm.submitted)}"
required maxlength="14">
</div>
<div class="invalid-feedback"
[hidden]="phone.valid || phone.untouched">
<div style="color:red;" *ngIf="phone.errors && phone.errors.required">
Phone number is required
</div>
<div style="color:red;" *ngIf="phone.errors && phone.errors.pattern">
Valid Phone number is invalid
</div>
</div>
</div>
<div class="col-xs-6">
<label for="email">Email<span style="color:red;"> *</span></label>
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-envelope"></i>
</div>
<input type="text"
class="form-control"
id="email"
placeholder="Email"
name="email"
[(ngModel)]="form.email"
#email="ngModel"
pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"
[ngClass]="{'is-invalid' : email.invalid && ((email.dirty || email.touched) || clientquoteForm.submitted)}"
required>
</div>
<div class="form-feedback" class="invalid-feedback"
[hidden]="email.valid || email.untouched">
<div style="color:red;" *ngIf="email.errors && email.errors.required">
Email is required
</div>
<div style="color:red;" *ngIf="email.errors && email.errors.pattern">
Valid Email is invalid
</div>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-12">
<div class="btn-group">
<button style="margin:5px" type="button" class="btn btn-warning" awPreviousStep>< Previous</button>
<button style="margin:5px" (keyup.enter)="onSubmit()" type="submit" class="btn btn-success" awNextStep> Get A Quote</button>
</div>
</div>
</div>
</div>
</div>
</aw-wizard-step>
<br>
<aw-wizard-step [stepTitle]="'Success'" [navigationSymbol]="{ symbol: '', fontFamily: 'FontAwesome' }">
<div class="centered-content">
<br>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-12">
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-12">
<div class="btn-group">
<!-- <button style="margin:5px" type="button" class="btn btn-warning" awPreviousStep>< Previous</button>
<button style="margin:5px" type="submit" class="btn btn-success" > Send Quote</button> -->
<!-- <button style="margin:5px" class="btn btn-success" type="button" href="/landing">Title on button</button> -->
<a style="margin:5px" routerLink="/landing" class="btn btn-primary"><i class="fa fa-home margin-right-10px"></i>
Home
</a>
</div>
</div>
</div>
</div>
</div>
</aw-wizard-step>
</aw-wizard>
</form>
我有三个步骤：
第 1 步：交易详情
第 2 步：个人详细信息
第 3 步：成功和反馈页面。
这就是我想要实现的目标：
我希望在进入步骤 2 之前验证步骤 1
我希望将第 2 步保存到数据库中。
我希望第 3 步显示成功消息并显示提交到数据库的数据的详细信息。
我想禁止用户点击 stepTitle（禁用它）。
到目前为止，我已经能够保存到数据库中。我如何实现这些？
【问题讨论】：
标签： angular