角度材料:反应性与模板?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了角度材料:反应性与模板?相关的知识,希望对你有一定的参考价值。

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

我正在处理一个接受URL作为输入的表单,然后使用URL中的数据刷新自身(在只读输入字段中)。从我收集到的,模板驱动的方法最适合这个用例,对吗?我正在使用Material组件,但是我找不到任何模板驱动的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>

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

角度材料日期选择器中的日期不正确

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

如何*保存*角度材料模态对话框的结果?

从子组件样式化角度材料组件

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

角度材料 MatButtonToggle 中的中心文本