如何在Angular项目中通过Teradata Covalent动态表单获取插入数据

嘿，我来帮你搞定这个问题！在Angular项目里用Teradata Covalent的动态表单收集用户输入后，获取数据其实有几种很实用的方式，我给你详细拆解下：

方式一：双向绑定[(ngModel)]（最简便） #

直接把动态表单和组件内的一个对象做双向绑定，用户输入的内容会自动同步到这个对象里，用起来特别省心。

组件代码 #

先在组件里定义一个用来存储表单数据的对象：

import { Component } from '@angular/core';
import { ITdDynamicElementConfig, TdDynamicElement } from '@covalent/dynamic-forms';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
})
export class YourComponent {
  public inputElements: ITdDynamicElementConfig[] = [
    { 
      name: 'Risposta', 
      label: 'Risposta alla domanda', 
      type: TdDynamicElement.Input, 
      required: true, 
      default: this.selectedIntent?.IntentDataRecord?.Answer, 
      flex: 100 
    },
    { 
      name: 'Descrizione', 
      type: TdDynamicElement.Input, 
      required: true, 
      default: this.selectedIntent?.IntentDataRecord?.Description, 
      flex: 100 
    },
    // 你的其他表单元素...
  ];
  // 用来存储表单数据的对象
  public formData: any = {};

  // 提交表单时获取数据
  onSubmit() {
    console.log('用户输入的数据:', this.formData);
    // 直接通过formData.Risposta、formData.Descrizione访问对应字段的值
  }
}

模板代码 #

在模板里给动态表单加上双向绑定：

<td-dynamic-form 
  [elements]="inputElements" 
  [(ngModel)]="formData"
></td-dynamic-form>

<button (click)="onSubmit()">提交</button>

方式二：通过模板引用变量+ViewChild获取表单实例 #

如果需要更灵活的操作（比如手动触发验证、精细控制），可以通过模板引用变量获取动态表单组件的实例，再从中取值。

模板代码 #

给动态表单加个模板引用变量：

<td-dynamic-form 
  #dynamicForm
  [elements]="inputElements"
></td-dynamic-form>

<button (click)="onSubmit()">提交</button>

组件代码 #

用@ViewChild获取实例，然后通过value属性拿到数据：

import { Component, ViewChild } from '@angular/core';
import { TdDynamicFormComponent, ITdDynamicElementConfig, TdDynamicElement } from '@covalent/dynamic-forms';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
})
export class YourComponent {
  public inputElements: ITdDynamicElementConfig[] = [/* 你的表单配置 */];
  
  @ViewChild('dynamicForm') dynamicForm!: TdDynamicFormComponent;

  onSubmit() {
    const formValues = this.dynamicForm.value;
    console.log('用户输入的数据:', formValues);
    // 同样可以通过formValues.Risposta访问对应字段的值
  }
}

方式三：实时监听表单值变化 #

如果需要在用户输入过程中实时获取数据，可以订阅表单的valueChanges observable：

import { Component, ViewChild, OnInit } from '@angular/core';
import { TdDynamicFormComponent } from '@covalent/dynamic-forms';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
})
export class YourComponent implements OnInit {
  public inputElements: ITdDynamicElementConfig[] = [/* 你的表单配置 */];
  
  @ViewChild('dynamicForm') dynamicForm!: TdDynamicFormComponent;

  ngOnInit() {
    this.dynamicForm.valueChanges.subscribe((values) => {
      console.log('实时更新的表单数据:', values);
      // 每次用户输入变化时，这里都会触发
    });
  }
}

要注意的是，你配置里的name字段会作为表单数据对象的键，比如Risposta对应第一个输入框的值，直接通过formData.Risposta就能精准拿到用户输入的内容啦。

内容的提问来源于stack exchange，提问作者bertonc96