表单的一般完整写法:
如果表单验证失败,必须 disable 提交按钮,阻止用户提交不合法的数据。
提交表单后,与表单对应的 json 数据 post 到后端:
json
{
"id":1,
"name":"pikachu",
"type":"fire"
}
修改 HTML, pokemon-template-form.component.html:
html
<!-- 当类型为 submit 的按钮被点击后,此 handleSubmit 将运行 -->
<form #form="ngForm" (ngSubmit)="handleSubmit(form)">
Pokemon Name:
<input type="text" [(ngModel)]="pokemon.name" name="name" />
<label>
<input
type="radio"
name="isCool"
[value]="true"
#pokemonName="ngModel"
[ngModel]="pokemon.isCool"
/>Pokemon is cool?
</label>
<label>
<input
type="radio"
name="isCool"
[value]="false"
[ngModel]="pokemon.isCool"
(ngModelChange)="toggleIsCool($event)"
/>Pokemon is NOT cool?
</label>
<label>
<input
type="checkbox"
name="acceptTerms"
[(ngModel)]="pokemon.acceptTerms"
/>
Accept Terms?
</label>
<label>
Pokemon Type:
<select name="pokemonType" [ngModel]="pokemon?.name">
<option
*ngFor="let type of pokemonType"
[value]="type.value"
[selected]="type.value === pokemon.type"
>
{{ type.value }}
</option>
</select>
</label>
<!-- 增加提交表单按钮 -->
<button type="submit" [disabled]="!form.valid">Save</button>
</form>
<div>
MODEL: {{ pokemon | json }} FORM: {{ form.value | json }} ERROR:
<div *ngIf="!pokemonName.pristine">NOT PRINSTINE ANYMORE IT IS DIRTY!</div>
</div>
实现 handleSubmit
,pokemon-template-form.component.html:
ts
import { Component, OnInit } from '@angular/core';
import { Pokemon, PokemonType } from '../models/pokemon';
import { PokemonService } from '../services/pokemon.service';
@Component({
selector: 'app-pokemon-template-form',
templateUrl: './pokemon-template-form.component.html',
styleUrls: ['./pokemon-template-form.component.css'],
})
export class PokemonTemplateFormComponent implements OnInit {
pokemon!: Pokemon;
// create dropdown for Pokemon type
pokemonType: PokemonType[] = [
{
key: 0,
value: 'Fire',
},
{
key: 1,
value: 'Water',
},
];
constructor(private pokemonService: PokemonService) {}
toggleIsCool(object: any) {
console.log(object);
this.pokemon.isCool = !this.pokemon.isCool;
}
ngOnInit() {
this.pokemonService.getPokemon(1).subscribe((data: Pokemon) => {
this.pokemon = data;
});
}
handleSubmit(object: any) {
console.log(object)
}
}
运行 ng serve
,点击 save button, 从 console 可以看到表单被提交: