## 一般是针对表单的(也适用于普通元素) >1:使用者必须在根module引入 ~~~ import {FormsModule} from "@angular/forms"; ~~~ ~~~ imports: [ BrowserModule, FormsModule, //导入imports AppRoutingModule ], ~~~ >component.ts ~~~ import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-mvvm', templateUrl: './mvvm.component.html', styleUrls: ['./mvvm.component.css'] }) export class MvvmComponent implements OnInit { constructor() { } public input1:string; public citys:Array<string>=[ "浙江","上海","江苏" ]; public formData:any={ username:"初始化的值", password:"", sex:"2", city:"" } ngOnInit(): void { } } ~~~ >html ~~~ <p>mvvm works!</p> <p>model</p> <input type="text" [(ngModel)]="input1" > <p>view</p> <div>{{input1}}</div> <p>表单提交</p> <div class="form"> 用户 <input type="text" [(ngModel)]="formData.username" ><br> 账号<input type="text" [(ngModel)]="formData.password"><br> 男<input type="radio" value="1" name="sex" [(ngModel)]="formData.sex" >||女<input type="radio" value="2" name="sex" [(ngModel)]="formData.sex" ><br> <select name="city" [(ngModel)]="formData.city"> <option [value]="item" *ngFor="let item of citys">{{item}}</option> </select> <p>结果 {{formData|json}}</p> </div> ~~~