Javascript Angular2表格：正确触发或更新验证&；以编程方式

我正在Angular2-Redux中创建一个向导。我使用反应式表单来处理和提交内部每个步骤的数据。我需要以编程方式触发表单验证，因为我的CalltoAction按钮的声明（为了进入下一步）位于与stepComponent分离的组件中。请参见下面的线框

组件的线框

当前行为

只有在窗体控件上发生更改时，才允许进行其自身的验证 跑。并且它的

toucted&valid

属性会相应地更新

因为我在Redux环境中，所以我会发送一个操作来获取 要应用于有效负载的当前步骤表单数据。什么时候 完成后，我触发另一个操作来保存数据

事实上，我通过以下方式知道表格的有效性或无效性：

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

因为我的表单使用控件的属性来呈现自定义消息 发生错误时，我希望重新运行验证 通过提交表单或使用其他功能可以使用 控件的属性，以通知发生错误的位置

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}" >
        <small class="form-control-feedback text-danger" *ngIf="name.invalid && name.touched && name.hasError('required')">
          The name is required
        </small>
      </div>
  </div>

姓名：
名称是必需的

尝试

我试着用

更新有效性：

this.stepForm.updateValueAndValidity（）

提供参数的更新有效性：

this.stepForm.updateValueAndValidity（{onlySelf:false，emitEvent:true}）

将每个控件标记为已触摸（在键入内容时触发事件）

for（此.stepForm.controls中的变量i）{
this.stepForm.controls[i].markAsTouched（）；
}

需要从HTML调用submit函数的解决方案 将不适用于我，因为按钮和窗体位于单独的组件中

5。有没有办法以编程方式触发或更新验证，或者至少在函数中正确提交表单？

以前的研究

我找到了许多帮助链接来实现这一点，但是，只有在同一组件中声明按钮时，这些解决方案才起作用。此外，当按钮位于

表单

标记内时：

• ：只在办公室工作 相同的组件
• ：仅在同一组件中工作
• ：不工作
• ：指上一个链接

---

我基本上有相同的设置，并通过做与

(this.stepForm as any).submitted = true

---

以防其他人仍在试图这样做。我通过使用ViewChild获取引用组件和步进器的引用来实现这一点。然后控制“下一步”按钮，单击按钮时不要使用matStepperNext

<button mat-button (click)="onStepOneNextClick()">Next</button>

@ViewChild(MatStepper) stepper: MatStepper;
@ViewChild(StepOneComponent, { static: true }) stepOneComponent: StepOneComponent;

onStepOneNextClick() {
  if (this.stepOneComponent.form.invalid) {
    this.stepOneComponent.form.markAllAsTouched();
  }
  else {
    this.stepper.next();
  }
}

下一步
@ViewChild（MatStepper）步进器：MatStepper；
@ViewChild（StepOneComponent，{static:true}）StepOneComponent:StepOneComponent；
OnStepOneExtClick（）{
if（this.stepOneComponent.form.invalid）{
this.stepOneComponent.form.markAllAsTouched（）；
}
否则{
this.stepper.next（）；
}
}

当前方法面临的问题是什么？能否构建一个最小的工作示例？@HarryNinh，问题是我无法从js触发表单验证。我想知道是否有办法做到这一点。我认为提交表单会导致内部验证运行；但是，我也找不到从js提交的方法。好吧，这么短的版本：1）表单会在每次更新字段值时自动验证；2） 您可以检索表单值并执行HTTP POST请求以提交form@HarryNinh谢谢你。所以，实际上，如果不需要更新或触摸控件，就无法手动验证表单，是吗？