Angular 材料:反应性与模板?

Posted

技术标签:

【中文标题】Angular 材料:反应性与模板?【英文标题】:Angular Material: Reactive vs Template? 【发布时间】:2019-07-02 22:59:39 【问题描述】:

我是 UI 开发的新手,我正在完全通过示例创建一个新的 Angular 7 Material 应用程序。

我正在处理一个接受 URL 作为输入的表单,然后使用来自 URL 的数据(在只读输入字段中)刷新自身。从我收集到的信息来看,模板驱动的方法最适合这个用例,对吗?我正在使用 Material 组件,但我找不到任何模板驱动的 Material 示例,而且我对何时使用什么标签感到非常困惑。

有人可以提供一些指导/建议,并指出我可以遵循的教程吗?

注意:我不认为下面引用的帖子解决了我的问题,因为它不包含示例。

【问题讨论】:

What are the practical differences between template-driven and reactive forms?的可能重复 @VladGincher,我看到了那个帖子,但我也需要例子。 【参考方案1】:

如果你还没有检查过,试试看https://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/

我通常使用模板派生的表单并且对它们没有任何问题,但是有时当您需要更复杂的验证时,使用这种方法可能会有点麻烦。但我喜欢模板派生表单的地方在于,您只需创建对象(模型)并将其提供给 [(ngModel)],然后您就拥有了漂亮的两种数据绑定方式。您需要做的只是获取数据并将其反序列化到您的模型中,然后您就可以在表单中获得数据。 如果您只需要读取功能,您可以简单地使用标签而不是输入并禁用它们。我希望下面的例子能帮助你了解它的外观。

<form #userForm="ngForm">
  <div>
    <mat-form-field>
      <mat-label *ngIf="someconditionToShow">Name:</mat-label>
      <mat-error>Name is required</mat-error>
      <input matInput type="text" placeholder="Please enter your name" name="nameInput"
        [(ngModel)]="model.Name" [disabled]="conditionToDisable" required>
    </mat-form-field>
  </div>
  <button type="button" disabled="userForm.invalid"></button>
</form>

【讨论】:

这看起来很棒!让我试试看,我会接受你的回答。 你能用只读字段的样子更新你的例子吗?我不确定如何使用mat-label 我收到以下错误:mat-form-field must contain a MatFormFieldControl。不确定缺少什么... 你应该把它添加到你的 app.module.ts import MatInputModule from '@angular/material'; @NgModule( imports: [ ... MatInputModule ... ] 是的,您可以使用mat-label 来显示数据。但为了更简单,您也可以使用普通标签&lt;label&gt;model.Name&lt;/label&gt;

以上是关于Angular 材料:反应性与模板?的主要内容,如果未能解决你的问题,请参考以下文章

Angular 材料 2 在组件之间共享反应形式

Angular 2中的模板驱动形式和反应形式有啥区别

如何使用模板驱动形式将角度路由与角度材料步进器(https://material.angular.io/components/stepper/overview)结合起来?

验证模板表单中的复选框列表(不是反应式表单)Angular 2

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

带有 [ngmodel] 的 Angular 材料 2 日期选择器