Question

我没有Angular的专业知识，需要帮助。我要验证放置在名为“ viewForm”的组件中的表单。该表单是由称为“点”的对象数组的循环生成的。在“ viewForm”的末尾，我包括另一个名为“ footer”的组件，该组件具有4个按钮，依次调用不同的服务来更新值等。

现在，我想向表单中的输入添加一些验证（必填），但是问题是我的按钮与表单不在同一组件中。怎么解决呢？我已经看到了有关如何使用提交按钮或按钮在同一组件中的位置执行操作的示例，但就我而言，情况有所不同。我想我需要向表单添加验证，然后以某种方式将其传递给“页脚”组件，以便能够在决定是否调用服务之前对表单进行验证。

这是“ viewForm”的快捷方式：

<div>
  <div *ngFor="let point of points; let x = index">
    <mat-form-field class="example-full-width">
      <input matInput type="text" [(ngModel)]="point.cValue" Placeholder="">
    </mat-form-field>
  </div>
</div>
<app-footer></app-footer>

页脚组件如下：

<footer class="footer">
        <div class="button-row">
            <button mat-raised-button (click)="save($event)">Save</button>
            <button mat-raised-button (click)="send($event)">Send</button>
            <button mat-raised-button (click)="noDeal($event)">No Deal</button>
            <button mat-raised-button (click)="deal($event)">Deal</button>
        </div>
    </footer>

Answer 1

在viewForm组件中：

您可以公开用于验证表单输入控件的公共方法。

在页脚组件中：

@ViewChild(viewForm) vf: viewForm;

save(e){
  this.vf.validate();
}

send(e){
  this.vf.validate();
}

Answer 2

我通过模板驱动的验证解决了该问题：

<form name="inspectionForm" #inspectionForm="ngForm">
    <div>
      <div *ngFor="let point of points; let x = index">
        <mat-form-field class="example-full-width">
          <input required matInput type="text" [(ngModel)]="point.cValue" Placeholder="" name="someName">
        </mat-form-field>
      </div>
    </div>
    <app-footer [formValid]="inspectionForm.form.valid"></app-footer>
</form>

然后在页脚组件中检查表单是否有效。感谢Suresh的帮助。

子组件中的Angular 2+验证

2 个答案: