Angular2 Form：以编程方式正确触发或更新验证答案

【问题标题】：Angular2 Form : trigger or update validation properly & programmaticallyAngular2 Form：以编程方式正确触发或更新验证
【发布时间】：2017-12-08 12:50:41
【问题描述】：

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

组件的线框

当前行为

仅当表单的控件发生更改时，它自己的验证运行。它的touched & 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 (var i in this.stepForm.controls) { this.stepForm.controls[i].markAsTouched(); }
需要从 HTML 调用提交函数的解决方案对我不起作用，因为按钮和表单位于单独的组件中。

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

以往的研究

我找到了许多帮助链接来实现这一点，但是，这些解决方案仅在按钮在同一组件中声明时才有效。而且，当按钮位于form 标签内时：

Angular2 - Validate and submit form from outside : 只在同一个组件
angular2 validate form on button click : 只在同一个组件中工作
Angular 2 Submit button outside of form：不工作
Is there a way to submit an Angular 2 model-driven form (reactive form) from a outside button?：参考上一个链接

【问题讨论】：

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

标签： javascript angular validation redux angular2-forms

【解决方案1】：

以防其他人仍在尝试这样做。我通过使用 ViewChild 来获取对被引用组件和步进器的引用来做到这一点。然后控制next按钮点击，按钮上没有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();
  }
}

【讨论】：

【解决方案2】：

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

来解决它

(this.stepForm as any).submitted = true

【讨论】：