跟着官网学Angular-创建响应式表单-源代码

效果：

 app-module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { ReactiveFormsModule } from '@angular/forms';
import { NameEditComponent } from './components/name-edit/name-edit.component';
import { ProfileEditorComponent } from './components/profile-editor/profile-editor.component';
import { NewProfileEditorComponent } from './components/new-profile-editor/new-profile-editor.component';
@NgModule({
  declarations: [
    AppComponent,
    NameEditComponent,
    ProfileEditorComponent,
    NewProfileEditorComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-component.html

<app-name-edit></app-name-edit>
<hr>
<app-profile-editor></app-profile-editor>
<hr>
<app-new-profile-editor></app-new-profile-editor>

单个控件：name-edit

ts:

/*
*目的：演示使用FormControl创建表单控件，并且实现设值setValue
 */
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-name-edit',
  templateUrl: './name-edit.component.html',
  styleUrls: ['./name-edit.component.css']
})
export class NameEditComponent implements OnInit {
  name = new FormControl('');
  constructor() { }

  ngOnInit(): void {
  }
  updateName(): void {
    this.name.setValue('Nancy');
  }
}

html:

<div class="box">
  <label >
    Name:
    <input class="input-text" type="text" [formControl]="name">
  </label>
  <p>
    Value: {{ name.value }}
  </p>
  <p>
    <button (click)="updateName()">Update Name</button>
  </p>
</div>

css:

.box{
  width: 300px;
  height: 200px;
  position: relative;
  left:40%;
  border:1px dashed black;
  border-radius: 45pt/20pt;
}
.input-text{
  border:2px solid lightskyblue;
  box-shadow: 0 0 8px 2px rgba(0,0,0,0.23);
  position: relative;
  left: 10px;
}
label,p{
  position: relative;
  top: 10px;
  left:10px;
}

使用FormGroup创建控件组：profile-editor

ts:

/*
*目的：演示使用FormGroup创建控件组，并且实现表单设值patchValue
 */
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-profile-editor',
  templateUrl: './profile-editor.component.html',
  styleUrls: ['./profile-editor.component.css']
})
export class ProfileEditorComponent implements OnInit {

  constructor() { }
  profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
    address: new FormGroup({
      street: new FormControl(''),
      city: new FormControl(''),
      state: new FormControl(''),
      zip: new FormControl('')
    })
  });

  ngOnInit(): void {
  }
  onSubmit(): void {
    // TODO: Use EventEmitter with form value
    console.warn(this.profileForm.value);
  }
  updateProfile(): void {
    this.profileForm.patchValue({
      firstName: 'Nancy',
      address: {
        street: '123 Drew Street'
      }
    });
  }
}

html:

<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">

  <label>
    First Name:
    <input type="text" formControlName="firstName">
  </label>

  <label>
    Last Name:
    <input type="text" formControlName="lastName">
  </label>

  <div formGroupName="address">
    <h3>Address</h3>

    <label>
      Street:
      <br>
      <input type="text" formControlName="street">
    </label>
    <br>
    <label>
      City:
      <br>
      <input type="text" formControlName="city">
    </label>
    <br>
    <label>
      State:
      <br>
      <input type="text" formControlName="state">
    </label>
    <br>
    <label>
      Zip Code:
      <br>
      <input type="text" formControlName="zip">
    </label>
  </div>

  <p>
    <button type="submit" [disabled]="!profileForm.valid">Submit</button>
  </p>

  <p>
    <button (click)="updateProfile()">Update Profile</button>
  </p>
</form>

css:

form{
  width: 300px;
  height: 400px;
  position: relative;
  left:40%;
  border:1px dashed black;
  border-radius: 45pt/20pt;
}
input{
  border:2px solid lightskyblue;
  box-shadow: 0 0 8px 2px rgba(0,0,0,0.23);
  position: relative;
  left:10px;
}
label,p{
  position: relative;
  top: 10px;
  left:10px;
}

使用FormBuilder创建控件组：new-profile-editor

ts:

/*
*目的：演示使用FormBuilder创建控件组，并且实现简单的表单验证以及表单设值patchValue
 */
import { Component, OnInit } from '@angular/core';
import {FormBuilder} from '@angular/forms';
import { Validators } from '@angular/forms';

@Component({
  selector: 'app-new-profile-editor',
  templateUrl: './new-profile-editor.component.html',
  styleUrls: ['./new-profile-editor.component.css']
})
export class NewProfileEditorComponent implements OnInit {

  profileForm = this.fb.group({
    firstName: ['', Validators.required],
    lastName: [''],
    address: this.fb.group({
      street: [''],
      city: [''],
      state: [''],
      zip: ['']
    }),
  });
  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
  }
  onSubmit(): void {
    // TODO: Use EventEmitter with form value
    console.warn(this.profileForm.value);
  }
  updateProfile(): void {
    this.profileForm.patchValue({
      firstName: 'Nancy',
      address: {
        street: '123 Drew Street'
      }
    });
  }
}

html:

<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">

  <label>
    First Name:
    <input type="text" formControlName="firstName">
  </label>

  <label>
    Last Name:
    <input type="text" formControlName="lastName" required>
  </label>

  <div formGroupName="address">
    <h3>Address</h3>

    <label>
      Street:
      <br>
      <input type="text" formControlName="street">
    </label>
    <br>
    <label>
      City:
      <br>
      <input type="text" formControlName="city">
    </label>
    <br>
    <label>
      State:
      <br>
      <input type="text" formControlName="state">
    </label>
    <br>
    <label>
      Zip Code:
      <br>
      <input type="text" formControlName="zip">
    </label>
  </div>

  <p>
    <button type="submit" [disabled]="!profileForm.valid">Submit</button>
  </p>

  <p>
    <button (click)="updateProfile()">Update Profile</button>
  </p>
  <p>
    Form Status: {{ profileForm.status }}
  </p>
</form>

css:

form{
  width: 300px;
  height: 420px;
  position: relative;
  left:40%;
  border:1px dashed black;
  border-radius: 45pt/20pt;
}
input{
  border:2px solid lightskyblue;
  box-shadow: 0 0 8px 2px rgba(0,0,0,0.23);
  position: relative;
  left:10px;
}
label,p{
  position: relative;
  top: 10px;
  left:10px;
}