在Angular 2模板中访问表单元素,可以使用模板引用变量来实现。以下是一个示例代码:
在上面的示例中,我们在表单元素上使用了ngModel
指令来实现双向绑定。然后,我们使用#myForm="ngForm"
语法在表单元素上创建了一个模板引用变量myForm
。
接下来,我们可以在组件中使用@ViewChild
装饰器来访问表单元素。通过在组件类中添加以下代码:
import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
@Component({
selector: 'my-app',
template: `...` // 模板代码
})
export class AppComponent {
@ViewChild('myForm') myForm: NgForm;
submitForm() {
console.log(this.myForm.value);
}
}
在上面的代码中,我们使用@ViewChild
装饰器来创建一个名为myForm
的属性,类型为NgForm
。这将允许我们在组件类中访问表单元素。
然后,我们可以在submitForm
方法中使用this.myForm.value
来获取表单元素的值,并进行相应的处理。