Angular模板引用变量（#var）

一、模板引用变量

模板引用变量使用井号(#)来声明引用变量。

模板引用变量通常用来引用模板中的某个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对象：

提交操作过程：

更多：

Angular管道操作符(|)

Angular 安全导航操作符(?.)和空属性路径

Angular2开发环境搭建之VS Code