[Angular] 笔记 17:提交表单 - ngSubmit

Submitting Forms (ngSubmit)

表单的一般完整写法:

如果表单验证失败,必须 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 可以看到表单被提交:

相关推荐
Myli_ing8 分钟前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
dr李四维26 分钟前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
雯0609~1 小时前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ1 小时前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z1 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4041 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish1 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five1 小时前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序1 小时前
vue3 封装request请求
java·前端·typescript·vue