佛山网站设计外包,wordpress主题站模板,青岛注册公司在哪个网站申请,定制app开发软件Submitting Forms (ngSubmit)
表单的一般完整写法#xff1a;
如果表单验证失败#xff0c;必须 disable 提交按钮#xff0c;阻止用户提交不合法的数据。
提交表单后#xff0c;与表单对应的 json 数据 post 到后端#xff1a;
{id:1,name:…Submitting Forms (ngSubmit)
表单的一般完整写法
如果表单验证失败必须 disable 提交按钮阻止用户提交不合法的数据。
提交表单后与表单对应的 json 数据 post 到后端
{id:1,name:pikachu,type:fire
}修改 HTML, pokemon-template-form.component.html:
!-- 当类型为 submit 的按钮被点击后此 handleSubmit 将运行 --
form #formngForm (ngSubmit)handleSubmit(form)Pokemon Name:input typetext [(ngModel)]pokemon.name namename /labelinputtyperadionameisCool[value]true#pokemonNamengModel[ngModel]pokemon.isCool/Pokemon is cool?/labellabelinputtyperadionameisCool[value]false[ngModel]pokemon.isCool(ngModelChange)toggleIsCool($event)/Pokemon is NOT cool?/labellabelinputtypecheckboxnameacceptTerms[(ngModel)]pokemon.acceptTerms/Accept Terms?/labellabelPokemon Type:select namepokemonType [ngModel]pokemon?.nameoption*ngForlet type of pokemonType[value]type.value[selected]type.value pokemon.type{{ type.value }}/option/select/label!-- 增加提交表单按钮 --button typesubmit [disabled]!form.validSave/button
/form
divMODEL: {{ pokemon | json }} FORM: {{ form.value | json }} ERROR:div *ngIf!pokemonName.pristineNOT PRINSTINE ANYMORE IT IS DIRTY!/div
/div实现 handleSubmitpokemon-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 可以看到表单被提交:
