久久精品中文字幕av,av.涩涩涩涩涩涩涩涩,亚洲国产日韩欧美精品成人久久久,成人福利电影免费在线观看,日产国产原创av,日韩av午夜激情,bt天堂中文字幕,超级碰人妻在线视频,欧美老熟妇久久一区二区

# [(ngModel)] 用表單處理用戶輸入是許多常見應(yīng)用的基礎(chǔ)功能。 應(yīng)用通過表單來讓用戶登錄、修改個(gè)人檔案、輸入敏感信息以及執(zhí)行各種數(shù)據(jù)輸入任務(wù)。 Angular 提供了兩種不同的方法來通過表單處理用戶輸入：響應(yīng)式表單和模板驅(qū)動(dòng)表單。 在此我們學(xué)習(xí)在生產(chǎn)項(xiàng)目使用頻率較**低**的模板驅(qū)動(dòng)表單。 > [info] 除特殊說明外，本節(jié)代碼操作均位于`src/app/add`文件夾。 ## C層初始化 首先，我們?cè)贑層中初始化一個(gè)教師，打開`app.component.ts`： ```typescript import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-add', templateUrl: './add.component.html', styleUrls: ['./add.component.css'] }) export class AddComponent implements OnInit { constructor() { } ngOnInit(): void { } } ``` 如下初始化教師teacher: ```typescript export class AddComponent implements OnInit { teacher = { name: '', username: '', email: '', sex: true }; constructor() { } ngOnInit(): void { } } ``` 接下來，定義一個(gè)當(dāng)用戶點(diǎn)擊『保存』按鈕時(shí)執(zhí)行的方法，通常來講，如果C層中的某個(gè)方法的作用是被V層的某個(gè)動(dòng)作（我們把用戶點(diǎn)擊『保存』按鈕稱為一個(gè)動(dòng)作）觸發(fā)，則該方法名將以`on`打頭，比如此時(shí)我們起名為`onSubmit()`，作用為在控制臺(tái)中打印當(dāng)前教師的值： ```typescript ngOnInit(): void { } onSubmit(): void { console.log(this.teacher); } } ``` ## V層綁定方法 在angular中，當(dāng)表單被提交時(shí)，將觸發(fā)`form`元素的 `ngSubmit`方法，我們?nèi)缦聦ngSubmit`綁定到C層的`onSubmit()`方法上： ```html <form class="container-sm" (ngSubmit)="onSubmit()"> ``` 細(xì)心的你可能也注意到了，聰明的webstrom編輯器在此提示了一個(gè)錯(cuò)誤：  這是由于angular雖然內(nèi)置了對(duì)`ngSubmit`方法的支持，但卻并未默認(rèn)開啟。為了達(dá)到高度的可定制化，angular把一些內(nèi)置的功能分別放到了內(nèi)置的不同模塊中。而若想使這些功能生效，則需要在當(dāng)前模塊中引入(imports)這些帶有功能的模塊。在angular中，對(duì)`ngSubmit`方法的支持模塊名為：`FormsModule`。 我們打開當(dāng)前組件所在模塊`AppModule`對(duì)應(yīng)的文件`src/app/app.module.ts`，并將`FormsModule`添加到`imports`中： ```typescript import {HttpClientModule} from '@angular/common/http'; import {AddComponent} from './add/add.component'; +import {FormsModule} from '@angular/forms'; imports: [ BrowserModule, AppRoutingModule, - HttpClientModule + HttpClientModule, + FormsModule ], ``` > [success] 本節(jié)開始，我們將使用國(guó)際通用的文件比較方法來展示文件的變化情況。`-`代表原文件本行刪除，`+`代表在原文件此行上新增。 此時(shí)webstrom對(duì)應(yīng)的錯(cuò)誤消失：  如果接下來，我們還需要將`FormsModule`添加到當(dāng)前的單元測(cè)試文件中，以使其在當(dāng)前動(dòng)態(tài)模塊下生效： ``` ?? import {FormsModule} from '@angular/forms'; beforeEach(async () => { await TestBed.configureTestingModule({ declarations: [AddComponent], imports: [FormsModule] ? }) .compileComponents(); }); ``` - ?? 在后續(xù)教程中，我們將逐步省略**非**首次引入代碼。 此時(shí)當(dāng)我們?cè)赩層中點(diǎn)擊『保存』按鈕時(shí)，C層中的`onSubmit()`將被執(zhí)行，控制臺(tái)打印信息如下：  ## V層綁定數(shù)據(jù) 模板驅(qū)動(dòng)表單提供了一種非常簡(jiǎn)單的數(shù)據(jù)綁定方式 ---- `[(ngModel)]="xxx"`，比如我們可以使用如下代碼將C層teacher中的屬性快速的綁定到V層中： ```html <div class="col-sm-10"> - <input type="text" class="form-control" id="name"> + <input type="text" class="form-control" ?name="name" [(ngModel)]="teacher.name" id="name"> </div> </div> <div class="mb-3 row"> <label for="username" class="col-sm-2 col-form-label">用戶名</label> <div class="col-sm-10"> - <input type="text" class="form-control" id="username"> + <input type="text" class="form-control" ?name="username" [(ngModel)]="teacher.username" id="username"> </div> </div> <div class="mb-3 row"> <label for="email" class="col-sm-2 col-form-label">Email</label> <div class="col-sm-10"> - <input type="text" class="form-control" id="email"> + <input type="text" class="form-control" ?name="email" [(ngModel)]="teacher.email" id="email"> </div> ``` **注意:** ? 我們?cè)跒閕nput添加`[(ngModel)]`的同時(shí)，還必須為其增加`name`屬性。 此時(shí)我們?yōu)楸韱渭尤胂嚓P(guān)測(cè)試信息后點(diǎn)擊『保存』按鈕，將在控制臺(tái)中打印如下信息，這充分的說明用戶在V層中輸入的數(shù)據(jù)成功的傳入了C層。  由于我們?cè)谛詣e中需要接收一個(gè)`boolean`類型的值，所以性別所使用的`radio`的處理的稍微麻煩一些： ```html <div class="form-check form-check-inline"> - <input class="form-check-input" type="radio" name="inlineRadioOptions" id="sex-male" value="option1"> + <input class="form-check-input" type="radio" id="sex-male" + name="sex" ? + [(ngModel)]="teacher.sex" ? + [value]="true" ?> <label class="form-check-label" for="sex-male">男</label> </div> <div class="form-check form-check-inline"> - <input class="form-check-input" type="radio" name="inlineRadioOptions" id="sex-female" value="option2"> + <input class="form-check-input" type="radio" id="sex-female" + name="sex" ? + [(ngModel)]="teacher.sex" ? + [value]="false" ?> <label class="form-check-label" for="sex-female">女</label> </div> ``` - ? 使用`[(ngModel)]`時(shí)必須設(shè)置`name`值，且兩個(gè)radio的值必須一致 - ? 兩個(gè)radio綁定同一值`teacher.sex` - ? 此處使用的是`[value]`="true"而非`value="true"` 選擇性別后，點(diǎn)擊保存按鈕在控制臺(tái)中成功打印出了`sex`的值:  ## 本節(jié)資源 | 名稱 | 地址 | 備注 | | -------------- | ------------------------------------------------------------ | ----------------------- | | 建立響應(yīng)式表單 | [https://angular.cn/guide/forms-overview#setup-in-reactive-forms](https://angular.cn/guide/forms-overview#setup-in-reactive-forms) | | | 保存表單數(shù)據(jù) | [https://angular.cn/guide/reactive-forms#grouping-form-controls](https://angular.cn/guide/reactive-forms#grouping-form-controls) | **保存表單數(shù)據(jù)** 一小節(jié) | | 本節(jié)源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step2.3.2.zip](https://github.com/mengyunzhi/angular11-guild/archive/step2.3.2.zip) | |