1

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

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

查看 Angular 文档，我发现：

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

我还发现这个有用的答案可以指导我走上正确的道路。

但是我仍然不清楚分配模板引用变量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>

打字稿文件的一部分：

@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仅 using与 using#nameField="ngModel"以及#formvs有什么区别#form="ngForm"？

4

1 回答 1

1

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

简短的回答是，通常您会声明模板变量而不为它们分配名称 => #variable <= 这将使您能够访问 html 元素及其值。在一些罕见的情况下，例如被称为指令的 ngForm 和 ngModel，它们将使您能够跟踪表单 => ngForm 中每个控件的值和有效性。

于 2020-02-14T14:51:02.760 回答