一、模板引用变量
模板引用变量使用井号(#)来声明引用变量。
模板引用变量通常用来引用模板中的某个DOM元素,它可以引用Angular组件或指令或 Web Component。
我们可以在当前模板的任何地方使用模板引用变量。
示例:
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">模板引用变量1</div>
</div>
<div class="panel-body">
<input type="text" name="phone" placeholder="请输入手机号" class="form-control" #phone (blur)="showOne(phone.value);">
<span class="lable lable-primary">{{phone.value}}</span>
</div>
</div>
ts方法定义:
showOne(str: string) {
console.info(str);
}
二、NgForm 指令
模板引用变量常用的是在Form表单定义时使用。
注:Angular中解析表单需要在当前模块中导入 FormsModule 。
这样Angular NgForm指令的引用,具备了跟踪表单中的每个空间的值和有效性的能力。
示例:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from "@angular/forms";
import { AppComponent } from './app.component';
import { StudentComponent } from "./student/student.component";
@NgModule({
declarations: [
AppComponent,
StudentComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [
// AppComponent,
StudentComponent
]
})
export class AppModule { }
完整的表单提交示例如下:
Html模板:
<div class="panel panel-warning">
<div class="panel-heading">
<div class="panel-title">模板引用变量2-表单</div>
</div>
<div class="panel-body">
<form (ngSubmit)="onSubmit(stuForm)" #stuForm="ngForm">
<div class="form-group">
<label for="name">姓名:</label>
<input type="text" name="name" required [(ngModel)]="stu.name" class="form-control">
</div>
<div class="form-group">
<label for="age">年龄:</label>
<input type="number" name="age" required [(ngModel)]="stu.age" class="form-control">
</div>
<button *ngIf="!issubmit" class="btn btn-success" type="submit" [disabled]="!stuForm.form.valid">确定提交</button>
<button *ngIf='issubmit' type="submit" disabled class="btn btn-success">正在提交...</button>
</form>
<div class="alert alert-info">
表单对象:{{stu|json}}
</div>
</div>
</div>
ts中Component定义:
export class StudentComponent implements OnInit {
constructor() { }
ngOnInit() {
}
stu = {};//空对象
public issubmit: boolean = false;
showOne(str: string) {
console.info(str);
}
onSubmit(model: NgForm) {
console.info(model);
//因为只读不能设置操作按钮的disabled属性
//model.invalid=false;
this.issubmit = true;
setTimeout(() => {
this.issubmit = false;
}, 1000);
}
}
跟踪NgForm对象:
提交操作过程:
更多: