typescript 嵌套的反应表单/表单数组

Posted 2021-05-21

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
        <div formGroupName="userData">
          <div class="form-group">
          <label for="username">Username</label>
            <input
              type="text"
              id="username"
              formControlName="username"
              class="form-control">
              <span class="help-block" *ngIf="!signupForm.get('userData.username').valid && signupForm.get('userData.username').touched">
                Please enter a valid username
              </span>
          </div>
          <div class="form-group">
            <label for="email">email</label>
            <input
              type="text"
              id="email"
              [formControlName]="'email'"
              class="form-control">
            <span class="help-block" *ngIf="!signupForm.get('userData.email').valid && signupForm.get('userData.email').touched">
              Please enter a valid email
            </span>
          </div>
        </div>
        <span class="help-block" *ngIf="!signupForm.get('userData').valid && signupForm.get('userData').touched">
          Please enter a valid user data
        </span>

        <div class="radio" *ngFor="let gender of genders">
          <label>
            <input
              type="radio"
              formControlName="gender"
              [value]="gender">{{ gender }}
          </label>
        </div>

        <div formArrayName="hobbies">
          <h4>Your Hobbies</h4>
          <button class="btn btn-default" type="button" (click)="onAddHobby()">Add Hobby</button>
          <div class="form-group" *ngFor="let hobbyControl of signupForm.get('hobbies').controls; let i = index">
            <input type="text" class="form-control" [formControlName]="i">
            <!--
              <input type="text" class"form-control" [formControlName]="i">

              Make sure to not lose any equal signes like o class. This is nasty :(
            -->
          </div>
        </div>

        <span class="help-block" *ngIf="!signupForm.valid && signupForm.touched">
          Please enter a valid Data
        </span>
        <button class="btn btn-primary" type="submit">Submit</button>
      </form>
    </div>
  </div>
</div>

.container {
  margin-top: 30px;
}

form .ng-invalid.ng-touched {
  border: 1px solid red;
}

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators, FormArray } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  genders = ['male', 'female'];

  // ReactiveFormsModule is required
  signupForm: FormGroup;

  ngOnInit() {
    // properties are used in cotations so that when the code gets mangled/minified it can be still accessed in the html code
    this.signupForm = new FormGroup({
      'userData': new FormGroup({
        'username': new FormControl(null, Validators.required),
        'email': new FormControl(null, [Validators.required, Validators.email]),
      }),
      'gender': new FormControl('male'),
      'hobbies': new FormArray([]),
    });
  }

  onSubmit() {
    console.log(this.signupForm);
  }

  onAddHobby() {
    const control = new FormControl(null, Validators.required);
    (<FormArray>this.signupForm.get('hobbies')).push(control);
  }
}