angular - 关于 Angular 模板驱动表单中 ngForm 和 ngModel 的概念

Question

您好，我最近涉足了 Angular 和 ionic 开发。

我知道插值和属性绑定(bind)是将数据从类传递到模板，并且插值仅支持字符串，而属性绑定(bind)支持所有类型。

事件绑定(bind)用于将数据从模板传递到类。

使用 foll 实现两种方式的绑定(bind)。 4种方式:

使用 ngModel 香蕉语法:

<input [(ngModel)]="username">
<p>Hello {{username}}!</p>

没有香蕉语法的 NgModel:

<input [ngModel]="username" (ngModelChange)="username = $event">
<p>Hello {{username}}!</p>

没有 ngModel:

<input [value]="username" (input)="username = $event.target.value">
<p>Hello {{username}}!</p>

或者

<input [value]="username" (input)="username = varTest.value" #varTest>
<p>Hello {{username}}!</p>

如果我们实现了适当的功能，我们可以实现自定义的双向绑定(bind)(没有 ngModel):

<custom-counter [(counter)]="someValue"></custom-counter>
<p>counterValue = {{someValue}}</p>

我们还有一个模板引用变量的概念。当您在输入字段上声明此内容时，可以使用插值在模板中访问字段的值。此外，如果将 ngModel 分配给模板引用变量.. #varTref="ngModel"，则可以使用插值在模板中访问元素的各种属性，如验证、脏、原始、触摸、未触摸。所有这些都可以通过将模板 ref 变量传递给代码类文件，例如按钮单击事件，或者我们可以利用 ViewChild 概念。

我的问题是关于表单(模板驱动表单)的 ngForms 和 ngModel 概念:

我们使用 <form #f="ngForm".....然后在每个输入元素中，我们使用带有名称的 ngModel，这使得它可以作为 forms.value.fieldname 的属性访问。
仅通过使用模板引用变量然后将其传递给按钮单击事件，从而可以访问代码中的表单元素，就不能实现同样的事情吗？那我们为什么要使用 ngForm 的概念呢？

在元素级别，我们使用 ngModel。这与属性绑定(bind)或事件绑定(bind)相同吗？还是只是为了让#f 可以访问该元素？我们也可以使用模板引用变量来实现相同的不是吗？为了实现双向绑定(bind)，我们在这里也使用了香蕉语法，那么在每个元素级别使用关键字 ngModel 真正用于模板驱动表单的目的是什么？

使用 [(ngModel)]=varName 是否与编写 [(ngModel)] name=varName 相同？

请我需要澄清一下。谢谢。

Answer 1

是的，这些概念起初可能会令人困惑。但是您在上面指定的有关双向绑定(bind)的一些信息是不正确的:

双向绑定(bind)
[(ngModel)]="lastName"
对组件属性的任何修改都会显示在模板中，并且模板中的任何更改都会在组件属性中设置。这最常用于输入框和模板驱动的表单。

以上是这个的“捷径”版本:
<input [ngModel]="lastName" (ngModelChange)="lastName = $event">
一种方式/属性绑定(bind)
[ngModel]="lastName"
UI 与组件属性的值保持同步。这个类似于插值:{{lastName}}
一次性绑定(bind)
ngModel="lastName"
只绑定(bind)组件属性的初始值，值变化不会改变。

模板引用变量

#lastNameVar="ngModel"    /* for a form model element eg input element*/
#f="ngForm"               /* for the form itself */

模板引用变量的主要目的是提供对模板中项目的引用。您无需将其添加到模板驱动表单上的每个输入元素，只需将其添加到您想要访问的那些。

例如:

  <div class="form-group row mb-2">
    <label class="col-md-2 col-form-label"
           for="lastNameId">Last Name</label>
    <div class="col-md-8">
      <input class="form-control"
             id="lastNameId"
             type="text"
             placeholder="Last Name (required)"
             required
             maxlength="50"
             [(ngModel)]="customer.lastName"
             name="lastName"
             #lastNameVar="ngModel"
             [ngClass]="{'is-invalid': (lastNameVar.touched || lastNameVar.dirty) && !lastNameVar.valid }" />
      <span class="invalid-feedback">
        <span *ngIf="lastNameVar.errors?.required">
          Please enter your last name.
        </span>
        <span *ngIf="lastNameVar.errors?.maxlength">
          The last name must be less than 50 characters.
        </span>
      </span>
    </div>
  </div>

注意上面如何将模板引用变量设置为 #lastName然后使用它来设置样式(使用 [ngClass] )并检查错误集合以显示适当的错误消息。

或者对于您的表单示例，您可以检查表单状态以禁用“保存”按钮，例如:

      <button class="btn btn-primary"
              type="submit"
              [disabled]="!f.valid">
        Save
      </button>

如果您不需要访问模板中的表单状态，则不需要模板引用变量。

您还可以将表单的模板引用变量传递给组件以访问表单值或状态:

在模板中:

<form novalidate
      (ngSubmit)="save(signupForm)"
      #signupForm="ngForm">

在组件中:

  save(customerForm: NgForm) {
    console.log('Saved: ' + JSON.stringify(customerForm.value));
  }

您可以改为传入每个单独控件的模板引用变量，但为什么呢？随着时间的推移添加控件，您必须记住始终将其添加到方法调用中。而且您必须检查每个控件的状态，而不仅仅是表单的整体状态。简单地将引用传递给表单会更容易/更好/更清晰。

<form novalidate
      (ngSubmit)="save(lastName, firstName, phone, email)">