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>

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