Question

我正在Angular2中构建一个向导 - Redux。我正在使用Reactive Forms来处理＆amp;提交内部每一步的数据。我需要以编程方式触发表单验证，因为为了进入下一步，我的号召性用语按钮的声明与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>

Attemps

我尝试使用

更新有效期：

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?：指前一个链接

Answer 1

我基本上具有相同的设置，并且通过执行

来解决它

(this.stepForm as any).submitted = true

Answer 2

以防其他人仍在尝试这样做。我通过使用 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();
  }
}

Angular2表单：正确触发或更新验证＆amp;编程

2 个答案: