Question

如何从角度动态形式获取值这是我的代码：我的html

<form (ngSubmit)="PreviewData()" [formGroup]="DataForm">
<div class="form-group row" *ngFor="let data of FormData;" >
        <label class="col-md-2 col-form-label" >{{data.name}}</label>
        <div class="col-md-10">
          <input type="text" class="form-control"  name="{{data.name}}">
        </div>
      </div>
<button class="btn btn-primary float-right" type="submit" >Preview</button>
</form>

在我的打字稿文件中

PreviewData() {
    this.payLoad = JSON.stringify(this.DataForm.value);
}

如何从ts文件的组数据中获取值

Answer 1

使用函数添加formControl。

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

@Component({
  selector: 'app-sample-reactive-form',
  templateUrl: './sample-reactive-form.component.html',
  styleUrls: ['./sample-reactive-form.component.css']
})

export class SampleReactiveFormComponent
{

  payLoad: any;
  FormData: any;
  DataForm: FormGroup = new FormGroup({});

  constructor()
  {
    this.FormData = [{
      name:'a'
    },{
      name:'b'
    }]

    this.DataForm = this.generateFormControls(this.FormData);
 }

    generateFormControls(formData: any)
    {
        let tempGroup: FormGroup = new FormGroup({});
        formData.forEach(i=>{
            tempGroup.addControl(i.name, new FormControl(''))
        })
        return tempGroup;
    }

    PreviewData() 
    {
         this.payLoad = JSON.stringify(this.DataForm.value);
    }
}

Answer 2

您可以使用以下方法从FormGroup中获取单个数据值：

this.DataForm.get('<enter control name>').value

例如，如果您的表单控件是“电子邮件”：

this.DataForm.get('email').value

或者，您可以使用以下方法将整个表单值作为对象获取：

this.DataForm.getRawValue()

如何从动态形式中获取价值

2 个答案: