angular入门基础教程(八）表单之双向绑定

绑定表单数据

为了让表单使用 Angular 的特性实现数据绑定，需要导入 FormsModule。
这个比 vue 要繁琐点，不复杂，但是比 react 的自己手动实现要方便，ng 帮我们实现了双向绑定

import { Component } from "@angular/core";
//必须导入这个module
import { FormsModule } from "@angular/forms";

@Component({
  selector: "app-about",
  standalone: true,
  imports: [FormsModule],
  templateUrl: "./about.component.html",
  styleUrl: "./about.component.css",
})
export class AboutComponent {
  username = "";
}

语法

[(ngModel)]="username" 跟 vue 的 v-model 很像，写法比 vue 的繁琐

<p>
  <label for="ipt">
    <p>{{username}}</p>
    姓名: <input id="ipt" type="text" [(ngModel)]="username" />
  </label>
</p>

这样，我们就实现了表单数据的双向绑定