如何创建嵌套的formgroup并获取值

2 回答

• 0

  您可以尝试以下，这可能对您有所帮助：

  import { ToasterContainerComponent, ToasterService, ToasterConfig} from 'angular2-toaster';
  // ======================== Internal Dependency Module Loading Start ================================
  import {TabViewModule} from 'primeng/tabview';
  
  import { Component, OnInit } from '@angular/core';
  import { FormBuilder, FormGroup, Validators,FormArray, FormControl} from '@angular/forms';
  import { Router } from '@angular/router';
  
  import { GlobalAjaxMethodHandler } from '../util/GlobalAjaxMethodHandler';
  import { GlobalValidationService } from '../util/GlobalValidationService';
  import { AjaxMethodName } from '../util/GlobalAjaxPathHandler';
  
  @Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
  })
  export class LoginComponent implements OnInit {
    loginForm: FormGroup;	
  
    form = new FormGroup({
      cities: new FormArray([
        // new FormControl('drp')
        this.initAddress()
      ]),
    });
  
    constructor(public _fb: FormBuilder,   private _GlobalAjaxMethodHandler: GlobalAjaxMethodHandler, public router: Router,public _toasterService:ToasterService) { }
  
    ngOnInit() {
    	this.formIntialization();
    }
  
    initAddress() {
          // initialize our address
          return this._fb.group({
              third  : ['', Validators.required],
              second: [''],
              first: [''],
              four: ['']
          });
      }
  
  
    //================================= Initialize form Value ============================================
      formIntialization() {
        this.loginForm = this._fb.group ({
          Email : ['', [Validators.required, GlobalValidationService.emailValidator]],
          Password : ['', [Validators.required, GlobalValidationService.passwordValidator]]
        });
      }
  
       get cities(): FormArray { return this.form.get('cities') as FormArray; }
  
      addCity() { 
        this.cities.push(this._fb.group({
              third  : ['', Validators.required],
              second: [''],
              first: [''],
              four: ['']
          }));
      }
  
      onSubmit() {
        console.log(this.cities.value);  // ['SF', 'NY']
        console.log(this.form.value);    // { cities: ['SF', 'NY'] }
      }
  
      setPreset() { 
        if(this.cities.length > 1){
         this.cities.removeAt(this.cities.length-1); 
        }
      }
  
  }
  

  <form [formGroup]="form" (ngSubmit)="onSubmit()">
          <div formArrayName="cities">
               <!-- <div *ngFor="let city of cities.controls; index as i">
                    <input [formControlName]="i" placeholder="City">
                  </div> -->
  
               <div *ngFor="let city of cities.controls; index as i">
                      <div [formGroupName]="i">
                          <select formControlName="first">
                              <option [selected]="true">--Select--</option>
                              <option>A1</option>
                              <option>B1</option>
                              <option>C1</option>
                          </select>
  
                          <select formControlName="second">
                              <option [selected]="true">--Select--</option>
                              <option>A2</option>
                              <option>B2</option>
                              <option>C2</option>
                          </select>
  
                          IN : <input type="checkbox" formControlName="third" value="+">
                          Out :<input type="checkbox" formControlName="four" value="+">
                   </div>
           </div>
          </div>
          <input type="button" name="" value="Enable integration" (click)="onSubmit()">
  </form>
  

  回复于 2024-04-23T20:34:56+08:00
• 0

  我不确定你的 onAddProperty 和 onDelProperty 方法中的for循环是什么 .

  如果我理解正确，您的 name 和 desg 控件应添加到 ngOnInit 中定义的 fb.group . 那些将只被定义一次 . 只有在每次用户单击“添加”时，您希望重复这些控件的 createItem 方法 .

  我有类似的代码添加地址块 . 我的代码看起来像这样：

  @Component({
      selector: 'my-signup',
      templateUrl: './app/customers/customer.component.html'
  })
  export class CustomerComponent implements OnInit {
      customerForm: FormGroup;
  
      get addresses(): FormArray{
          return <FormArray>this.customerForm.get('addresses');
      }
  
      constructor(private fb: FormBuilder) { }
  
      ngOnInit(): void {
          this.customerForm = this.fb.group({
              firstName: ['', [Validators.required, Validators.minLength(3)]],
              lastName: ['', [Validators.required, Validators.maxLength(50)]],
              addresses: this.fb.array([this.buildAddress()])
          });
      }
  
      addAddress(): void {
          this.addresses.push(this.buildAddress());
      }
  
      buildAddress(): FormGroup {
          return this.fb.group({
                  addressType: 'home',
                  street1: '',
                  street2: '',
                  city: '',
                  state: '',
                  zip: ''
          });
      }
   }
  

  在上面的示例中，名字和姓氏只出现一次，但每次用户单击添加按钮时，地址字段都会重复出现 .

  有关完整的工作示例，请查看此github：https://github.com/DeborahK/Angular2-ReactiveForms（特别是Demo-Final文件夹）

  UPDATE to include YOUR code:

  进行以下更改...请注意，您不想重复的所有内容都在 ngOnInit 中 . 你想要重复的一切都在 createItem 中 .

  ngOnInit() {
      this.searchForm = this.fb.group({
        name: '',
        desg: '',
        properties: this.fb.array([this.createItem()])
      });    
    }
  
    createItem(): FormGroup {
      return this.fb.group({
        social_media: '',
        github:''
      });
    }
  

  当然，您还需要从html中的 ngFor 中删除不想重复的字段 . 只需将它们移到 ngFor 上方即可 .

  回复于 2024-04-23T20:34:56+08:00