模板引用变量：分配 ngForm 和 ngModel答案

【问题标题】：Template reference variables: assigning ngForm and ngModel模板引用变量：分配 ngForm 和 ngModel
【发布时间】：2020-02-14 13:55:57
【问题描述】：

我正在 Pluralsight 上学习 Angular，我有一个关于我目前正在学习的课程的问题。

当模板引用变量被赋值时，我对它们背后的推理感到困惑。例如，如果您将#name 放在<input> 标记中，我知道名称现在可以引用输入标记及其关联值。我的问题是关于诸如#name="ngModel"

之类的声明

查看 Angular 文档，我发现：

您需要一个模板引用变量才能从模板中访问输入框的 Angular 控件。在这里，您创建了一个名为 name 的变量，并为其赋予了值“ngModel”。

我还找到了 this 有用的答案来指导我走上正确的道路。

但我仍然有点不清楚分配模板引用变量ngModel 增加了什么值。

我目前正在写的部分表格：

<form #form="ngForm" (ngSubmit)="onSubmit(form)">

        <div class="form-group">
            <label for="name">Name</label>
            <input id="name" name="name" class="form-control" [(ngModel)]="userSettings.name"
                    required #nameField="ngModel"
                    (blur)="onBlur(nameField)"
                    [class.field-error]="form.submitted && nameField.invalid">
            <div [hidden]="!form.submitted || nameField.valid"
                class="alert alert-danger">
                Enter a name
            </div>
        </div>

Typescript 文件的一部分：

@Component({
  selector: 'app-user-settings-form',
  templateUrl: './user-settings-form.component.html',
  styleUrls: ['./user-settings-form.component.css']
})
export class UserSettingsFormComponent implements OnInit {

  originalUserSettings: UserSettings = {
    name: null,
    emailOffers: null,
    interfaceStyle: null,
    subscriptionType: null,
    notes: null
  };

  userSettings: UserSettings = { ...this.originalUserSettings };

  constructor() { }

  ngOnInit(): void {

  }

仅使用#nameField 与使用#nameField="ngModel" 以及#form 与#form="ngForm" 有什么区别？

【问题讨论】：

标签： angular angular-forms angular-template-form

【解决方案1】：

我不确定您查看了哪些文档，但您可以在这里查看 => https://angular.io/guide/template-syntax#input-and-output-properties

简短的回答是，通常您会声明模板变量而不为它们分配名称 => #variable ngForm。

【讨论】：