小编Leo*_*Leo的帖子

我正在 Angular2 - Redux 中构建一个向导。我正在使用 Reactive Forms 来处理和提交内部每一步的数据。我需要以编程方式触发表单验证，因为为了进入下一步，我的号召性用语按钮的声明位于与 stepComponent 分开的组件中。请参阅下面的线框

组件的线框

当前行为

1. 只有当表单控件发生更改时，它自己的验证才会运行。它的touched & valid属性会相应地更新。

2. 由于我在 Redux 环境中，因此我调度了一个操作来获取当前步骤表单数据，以便应用于有效负载。完成后，我触发另一个操作来保存数据。

3. 实际上，我通过使用以下方法知道表单何时有效或无效：

    submitForm(form: FormGroup):void{
       if(form.valid){
         this.actionsStep.saveStep(form.value);
       }else{
         console.log('Form invalid ')
       }
     }
   

   Run Code Online (Sandbox Code Playgroud)

4. 由于我的表单使用控件的属性在发生错误时呈现自定义消息，因此我想通过提交表单或使用另一个函数来重新运行验证，以便能够再次使用控件的属性来通知发生错误的位置。

StepComponent.ts : 表单声明

this.stepForm = this.formBuilder.group({
  name: ['', Validators.required],
  email: ['', Validators.required]
});

step-component.html : 表单 HTML

<form id="ngForm" [formGroup]="stepForm" (ngSubmit)="submitForm(stepForm.value)" class="form-horizontal form-box-content">
    <div class="form-group row" [ngClass]="{'has-danger' :name.invalid && name.touched}">
      <label class="col-md-2 col-form-label">Name:</label>
      <div class="col-md-10">
        <input 
        name="titulo" class="form-control required" 
               formControlName="name" placeholder="" type="text"  [ngClass]="{'form-control-danger' :name.invalid && name.touched}" > …