关于模板驱动形式中ngForm和ngModel的概念

Question

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

使用Foll实现了双向绑定。4种方式：

1. 使用ngModel banana语法:

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

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

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

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

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

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

拜托，我需要一些澄清。谢了。

Answer 1

是的，这些概念一开始可能会令人困惑。但是您在上面指定的关于双向绑定的一些信息是不正确的：

双向约束

[(ngModel)]=“LastName”

UI与组件属性的值保持同步。这个类似于插值:{{lastName}}

一次性绑定

ngmodel=“lastname”

#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>

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

      <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)">