Submitting Forms (ngSubmit)

表单的一般完整写法：

如果表单验证失败，必须 disable 提交按钮，阻止用户提交不合法的数据。

提交表单后，与表单对应的 json 数据 post 到后端：

{"id":1,"name":"pikachu","type":"fire"
}

修改 HTML, pokemon-template-form.component.html:

<!-- 当类型为 submit 的按钮被点击后，此 handleSubmit 将运行 -->
<form #form="ngForm" (ngSubmit)="handleSubmit(form)">Pokemon Name:<input type="text" [(ngModel)]="pokemon.name" name="name" /><label><inputtype="radio"name="isCool"[value]="true"#pokemonName="ngModel"[ngModel]="pokemon.isCool"/>Pokemon is cool?</label><label><inputtype="radio"name="isCool"[value]="false"[ngModel]="pokemon.isCool"(ngModelChange)="toggleIsCool($event)"/>Pokemon is NOT cool?</label><label><inputtype="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:

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 typepokemonType: 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 可以看到表单被提交: