带有模板驱动表单的 MatHorizo​​ntalStepper stepControl

Posted

技术标签:

【中文标题】带有模板驱动表单的 MatHorizo​​ntalStepper stepControl【英文标题】:MatHorizontalStepper stepControl with template driven forms 【发布时间】:2018-10-20 01:55:16 【问题描述】:

有什么方法可以将[stepControl] 错误匹配器与模板驱动的表单一起使用?文档只介绍了一个 AbstractControl 实例,它显然强制使用响应式表单。

我尝试使用[stepControl]="myNgForm"[linear]="true" 来验证步骤,但步进器只是忽略它。

感谢您的帮助。

谢谢!

【问题讨论】:

你的意思是表单输入验证吗? 【参考方案1】:

步骤控制似乎与“form.control”一起使用。 这是一个示例,每个步骤一个表单和模板驱动的表单。

  <mat-vertical-stepper [linear]="true">
    <mat-step [stepControl]="form1.control">
       <form #form1="ngForm">
          <input [(ngModel)]="name" name="name" required />
       </form>
    </mat-step>
    <mat-step [stepControl]="form2.control">
       <form #form2="ngForm">
          <input [(ngModel)]="address" name="address" required />
       </form>
    </mat-step>
  </mat-vertical-stepper>

【讨论】:

在 Angular 10 中对我不起作用:Property 'form1' does not exist on type 'MyComponent'【参考方案2】:

使用 [stepControl]="myNgForm.controls.[controlGroup]"

<form #form="ngForm" novalidate>
  <mat-vertical-stepper [linear]="true">
    <mat-step label="Reporting person" ngModelGroup="reportor" [stepControl]="form.controls.reportor">
       <mat-form-field>
          <input matInput placeholder="First Name" name="firstName" ngModel required />
       </mat-form-field>
    </mat-step>
  </mat-vertical-stepper>
</form>

【讨论】:

使用stepControlngModelGroup 一定要切换到Reactive Form programming in Angular 不是吗?【参考方案3】:

ngForm 指令具有 FormGroup

类型的属性 form

https://angular.io/api/forms/NgForm

【讨论】:

您能否提供链接周围的上下文以防万一它中断?谢谢!

以上是关于带有模板驱动表单的 MatHorizo​​ntalStepper stepControl的主要内容,如果未能解决你的问题,请参考以下文章

form-horizo​​ntal 不适用于 django-crispy-forms 和 django-registration-redux

模板驱动表单和使用服务的响应式表单之间的区别

如何在 Angular 中将此模板驱动的表单更改为反应式表单?

模板驱动表单中的表单验证问题

Angular2嵌套模板驱动表单

模板驱动表单(实验部分)