带有模板驱动表单的 MatHorizontalStepper stepControl
Posted
技术标签:
【中文标题】带有模板驱动表单的 MatHorizontalStepper 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>
【讨论】:
使用stepControl
和ngModelGroup
一定要切换到Reactive Form programming in Angular 不是吗?【参考方案3】:
ngForm 指令具有 FormGroup
类型的属性 formhttps://angular.io/api/forms/NgForm
【讨论】:
您能否提供链接周围的上下文以防万一它中断?谢谢!以上是关于带有模板驱动表单的 MatHorizontalStepper stepControl的主要内容,如果未能解决你的问题,请参考以下文章
form-horizontal 不适用于 django-crispy-forms 和 django-registration-redux