时间戳

首页 > 解决方案 > Angular 材质：反应性与模板？

angular - Angular 材质：反应性与模板？

问题描述

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

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

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

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

标签： angularangular-material

解决方案

如果您还没有检查过，请尝试一下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>

推荐阅读