Angular模板引用变量（#var）

雨点打透心脏的1/2处 2022-06-04 05:26 196阅读 0赞

**一、模板引用变量**

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

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

![Center][]

提交操作过程：

![Center 1][]![Center 2][]

[Angular管道操作符(|)][Angular]

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

[Angular2开发环境搭建之VS Code][Angular2_VS Code]

[Center]: /images/20220604/6771e41f902b4b9aa1ac155c3a39de72.png
[Center 1]: https://img-blog.csdn.net/20171205173441684?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTEyNzAxOQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 2]: /images/20220604/55f684f2314842e8a3832eb3f697ee0c.png
[Angular]: http://blog.csdn.net/u011127019/article/details/78721018
[Angular _.]: http://blog.csdn.net/u011127019/article/details/78720520
[Angular2_VS Code]: http://blog.csdn.net/u011127019/article/details/78680956