angular - 向导中的表单组(检查某些元素的验证)

Question

我有一个包含表单组的 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>

Answer 1

在我的应用程序中，我为每个向导步骤使用了多种表单并且效果很好，然后我决定发布我的经验来帮助遇到我问题的其他人:

我的 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 ,希望这个答案对您有所帮助。