[英]Template reference variables: assigning ngForm and ngModel
I am learning Angular on Pluralsight and I have a question regarding a course I am taking currently.我正在 Pluralsight 上学习 Angular,我有一个关于我目前正在学习的课程的问题。
I am confused on the reasoning behind template reference variables when they are assigned a value.当模板引用变量被赋值时,我对它们背后的推理感到困惑。 For example, if you put #name
in an <input>
tag, I understand name can now reference the input tag and it's associated value.例如,如果您将#name
放在<input>
标签中,我知道 name 现在可以引用 input 标签及其关联值。 The question I have is regarding decalrations such as #name="ngModel"
我的问题是关于诸如#name="ngModel"
Looking over the Angular documentation, I found this:查看 Angular 文档,我发现了这一点:
You need a template reference variable to access the input box's Angular control from within the template.您需要一个模板引用变量来从模板内访问输入框的 Angular 控件。 Here you created a variable called name and gave it the value "ngModel".在这里,您创建了一个名为 name 的变量,并将其赋值为“ngModel”。
I also found this helpful answer to guide me on the right track.我还找到了这个有用的答案来指导我走上正轨。
But I am still a bit unclear as to what value assigning the template reference variable ngModel
adds.但是我仍然有点不清楚分配模板引用变量ngModel
添加什么值。
Part of the form I am currently writing:我目前正在编写的表格的一部分:
<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>
Part of the Typescript file:打字稿文件的一部分:
@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 {
}
What is the difference between just using #nameField
vs using #nameField="ngModel"
as well as #form
vs #form="ngForm"
?仅使用#nameField
与使用#nameField="ngModel"
以及#form
与#form="ngForm"
什么#form="ngForm"
?
I am not sure which documentation did you have a look at but you can have a look here => https://angular.io/guide/template-syntax#input-and-output-properties我不确定您查看了哪些文档,但您可以在这里查看 => https://angular.io/guide/template-syntax#input-and-output-properties
The short answer is that normally you would declare template variables without assigning a name to them => #variable <= and this will give you access to the html element and its value.简短的回答是,通常您会声明模板变量而不为其分配名称 => #variable <= 并且这将使您可以访问 html 元素及其值。 In some rare cases as is in the case with the ngForm and ngModel which are called directives, they will give you for example the ability to track the value and validity of every control in the form => ngForm.在一些罕见的情况下,如 ngForm 和 ngModel 被称为指令的情况,例如,它们将使您能够跟踪表单 => ngForm 中每个控件的值和有效性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.