我有一个包含表单组的 2 步向导，在单击下一页按钮的第一步中，我想检查第一步中的表单组元素的有效性。我的问题是:
1 - 在每个向导步骤中使用 2 种不同的表单还是在向导的所有步骤中使用一个表单组更好？
2 - 如果我使用一个表单组，我如何在每一步检查表单有效性部分？
我的模板代码:
<wizard #wizard navBarLayout="large-empty-symbols">
<wizard-step [canExit]="moveDirection.bind(this, formGroup.valid)" navigationSymbol="1">
<form [formGroup]="formGroup">
<input-form-control
[required]="true"
[group]="formGroup"
label="Name"
name="name"
controlId="name"
helpText="Enter the Server Unit Name"
>
</input-form-control>
<input-form-control
[required]="true"
[group]="formGroup"
label="Label"
name="label"
controlId="label"
helpText="Enter the Server Unit Label"
>
</input-form-control>
<input-form-control
[required]="false"
[group]="formGroup"
label="Description"
name="description"
controlId="description"
helpText="Enter the Server Unit Description"
>
</input-form-control>
<div class="m-portlet__foot m-portlet__foot--fit">
<div class="m-form__actions m-form__actions">
<div class="row justify-content-center">
<div class="col-lg-9 ml-lg-auto">
<button routerLink="/asset/server-unit" class="btn btn-secondary">
Cancel
</button>
<button class="btn btn-primary" (click)="checkFormValidity()"
id="next-step" type="button" nextStep>
Next
</button>
</div>
</div>
</div>
</div>
</form>
</wizard-step>
<wizard-step [canExit]="moveDirection.bind(this, formGroup.valid)" navigationSymbol="2">
<form [formGroup]="step2formGroup">
<switch-form-control
label="Enable Execution"
controlName="execution"
controlId="enable-execution"
helpText="Set Job Enable Execution state"
>
</switch-form-control>
<div class="m-portlet__foot m-portlet__foot--fit">
<div class="m-form__actions m-form__actions">
<div class="row justify-content-center">
<div class="col-lg-9 ml-lg-auto">
<button routerLink="/asset/server-unit" class="btn btn-secondary">
Cancel
</button>
<button class="btn btn-primary" id="previous-step" type="button" previousStep>
Previous
</button>
<button class="btn btn-success" (click)="registerItem()" id="submit" type="button" [loadingBtn]="promise">
{{isEdit ? "Update" : "Add"}}
</button>
</div>
</div>
</div>
</div>
</form>
</wizard-step>
</wizard>
最佳答案
在我的应用程序中，我为每个向导步骤使用了多种表单并且效果很好，然后我决定发布我的经验来帮助遇到我问题的其他人:
我的 html:
<wizard #wizard navBarLayout="large-empty-symbols">
<wizard-step [canExit]="moveDirection.bind(this, formGroups.step1formGroup.valid)" navigationSymbol="1">
<form [formGroup]="formGroups.step1formGroup">
<input-form-control
[required]="true"
[group]="formGroups.step1formGroup"
label="Name"
name="name"
controlId="name"
helpText="Enter the Server Unit Name"
>
</input-form-control>
<div class="m-portlet__foot m-portlet__foot--fit">
<div class="m-form__actions m-form__actions">
<div class="row justify-content-center">
<div class="col-lg-9 ml-lg-auto">
<button routerLink="/asset/server-unit" class="btn btn-secondary">
Cancel
</button>
<button class="btn btn-primary" (click)="checkFormValidity('step1formGroup')" id="next-step" type="button" nextStep>
Next
</button>
</div>
</div>
</div>
</div>
</form>
</wizard-step>
<wizard-step [canExit]="moveDirection.bind(this, formGroups.step2formGroup.valid)" navigationSymbol="2">
<form [formGroup]="formGroups.step2formGroup">
<switch-form-control
label="Enable Execution"
controlName="execution"
id="enable-execution"
helpText="Set Job Enable Execution state"
>
</switch-form-control>
<div class="m-portlet__foot m-portlet__foot--fit">
<div class="m-form__actions m-form__actions">
<div class="row justify-content-center">
<div class="col-lg-9 ml-lg-auto">
<button routerLink="/asset/server-unit" class="btn btn-secondary">
Cancel
</button>
<button class="btn btn-primary" id="previous-step" type="button" previousStep>
Previous
</button>
<button class="btn btn-success" (click)="registerItem('step2formGroup')" id="submit" type="button" [loadingBtn]="promise">
{{isEdit ? "Update" : "Add"}}
</button>
</div>
</div>
</div>
</div>
</form>
</wizard-step>
</wizard>
我的组件:
export class AppComponent {
constructor(formBuilder: FormBuilder) {
let controlsConfig = { step1formGroup: {
"name": ['', Validators.required]
},
step2formGroup: {
"execution": [true]
}
}
for (let item in this.controlsConfig) {
this.formGroups[item] = this.formBuilder.group(controlsConfig[item]);
}
}
moveDirection = (validityStatus, direction) => {
if (direction === MovingDirection.Backwards) {
return true;
}
return validityStatus;
};
storeData(dataType, data) {
console.log(dataType);
if (!this.formGroups.step1formGroup.controls[dataType] && !this.formGroups.step2formGroup.controls[dataType]) {
return;
}
let formGroup: string = '';
if (this.formGroups.step1formGroup.controls[dataType]) {
formGroup = 'step1formGroup';
} else {
formGroup = 'step2formGroup';
}
this.formGroups[formGroup].controls[dataType].setValue(data.value);
}
registerItem(index) {
if (!this.formGroups[index].valid) {
this.checkFormValidity(index);
return;
}
this.submit().then(() => {
this.notificationService.setNotifies({
message: this.isEdit ? 'Device Edited Successfully.' : 'Device Added Successfully.',
type: 'success'
});
this.router.navigate([this.url]);
}, error => {
this.notificationService.setNotifies({
message: this.errorMapperService.mapper(error.errorCode || ''),
type: 'danger'
});
});
}
addItem() {
let formData = Object.assign({});
for (let formGroup in this.formGroups) {
formData = Object.assign(formData, this.formGroups[formGroup].value);
}
return this.deviceDataService.registerDevice(this.responseMapper(formData, 'isInAdd'), this.assetName);
}
updateItem() {
let formData = Object.assign({});
for (let formGroup in this.formGroups) {
formData = Object.assign(formData, this.formGroups[formGroup].value);
}
return this.deviceDataService.updateDevice(this.responseMapper(formData, 'isInUpdate'), this.assetName);
}
checkFormValidity(index) {
for (let item in this.formGroups[index].controls) {
this.formGroups[index].controls[item].markAsTouched();
}
}
}
我用过ng2-archwizard , 希望这个答案对您有所帮助。
关于angular - 向导中的表单组(检查某些元素的验证)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49249770/