Angular 表单提交

水深无声 2023-05-30 14:59 21阅读 0赞

## 一、响应式表单提交 ##

### 1.1 使用 FormGroup实例 ###

1.1.1 在app.module.ts中引入 ReactiveFormsModule

import { ReactiveFormsModule } from '@angular/forms'

![20191111000346966.png][]

1.1.2 创建表单

<form [formGroup]="profileForm" (submit)="onSubmit()">
    
      <label>
        First Name:
        <input type="text" formControlName="firstName">
      </label>
      <br />
      <label>
        Last Name:
        <input type="text" formControlName="lastName" placeholder="请输入last name">
      </label>
    
      <div formGroupName="addressForm">
        <label>
          street:
          <input type="text" formControlName="street">
        </label>
        <br/>
        <label>
          city:
          <input type="text" formControlName="city">
        </label>
        <br/>
        <label>
          state:
          <input type="text" formControlName="state">
        </label>
        <br/>
        <label>
          zip:
          <input type="text" formControlName="zip">
        </label>
        <br/>
      </div>
    
      <button type="submit" [disabled]="!profileForm.valid">submit</button>
    </form>

1.1.3 进行绑定

import { FormGroup, FormControl } from '@angular/forms';
    import { Component, OnInit } from '@angular/core';
    
    @Component({
      selector: 'app-product-groupEditor',
      templateUrl: './product-groupEditor.component.html',
      styleUrls: ['./product-groupEditor.component.css']
    })
    export class ProductGroupEditorComponent implements OnInit {
    
      profileForm = new FormGroup({
        firstName: new FormControl(''),
        lastName: new FormControl(''),
        addressForm: new FormGroup({
          street: new FormControl(''),
          city: new FormControl(''),
          state: new FormControl(''),
          zip: new FormControl('')
        })
      });
    
      constructor() { }
    
      ngOnInit() {
      }
    
      onSubmit() {
        console.warn(this.profileForm.value);
        window.alert(this.profileForm.value);
        // this.profileForm.reset();
        this.profileForm.setValue({
          firstName: 'Nancy'
        })
        // this.profileForm.setValue({firstName:"tomtom"});
      }
    
    }

### 1.2 使用FormBuilder创建表单 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70][]

import { Component, OnInit } from '@angular/core';
    import { FormGroup, FormControl, FormBuilder } from '@angular/forms'
    
    @Component({
      selector: 'app-product-builderEdit',
      templateUrl: './product-builderEdit.component.html',
      styleUrls: ['./product-builderEdit.component.css']
    })
    export class ProductBuilderEditComponent implements OnInit {
    
      checkoutForm = this.formBuilder.group({
        firstName: [''],
        lastName: [''],
        addressForm: this.formBuilder.group({
          street: [''],
          city: [''],
          state: [''],
          zip: ['']
        })
      });
    
      constructor(
        private formBuilder : FormBuilder
      ) { }
    
      ngOnInit() {
      }
    
      onSubmit() {
        console.warn(this.checkoutForm.value);
        window.alert(this.checkoutForm.value);
        // this.profileForm.reset();
        this.checkoutForm.patchValue({
          firstName: 'Nancy'
        })
        // this.profileForm.setValue({firstName:"tomtom"});
      }
    
    }

[20191111000346966.png]: https://img-blog.csdnimg.cn/20191111000346966.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191111091717641.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx,size_16,color_FFFFFF,t_70