如何将 Angular 表单数据添加到模型数组？答案

【问题标题】：How to Angular form data added to model array?如何将 Angular 表单数据添加到模型数组？
【发布时间】：2018-11-22 11:05:39
【问题描述】：

import { Component, OnInit } from '@angular/core';
import { Senderv3 } from 'app/models/codec/senderv3';
import { CustomerInfoService } from '../../../services/customer-info.service';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';


@Component({
  selector: 'app-senderv3',
  templateUrl: './senderv3.component.html',
  styleUrls: ['./senderv3.component.scss']
})
export class Senderv3Component implements OnInit {

  VirtualMsisdn = new FormControl('', Validators.required);
  OperatorVariantId = new FormControl('', Validators.required);
  SmsHeader = new FormControl('', Validators.required);
  ServiceCode = new FormControl('', Validators.required);
  form: FormGroup;

  senders: Senderv3[] = [ { VirtualMsisdn: this.VirtualMsisdn.value, OperatorVariantId: this.OperatorVariantId.value, 
    SmsHeader: this.SmsHeader.value, ServiceCode: this.ServiceCode.value } ] as Senderv3[];

  constructor(private customerInfoService: CustomerInfoService, private router: Router, private fb: FormBuilder) { }

  ngOnInit() {
    this.form = this.fb.group({
      VirtualMsisdn: this.VirtualMsisdn,
      OperatorVariantId: this.OperatorVariantId,
      SmsHeader: this.SmsHeader,
      ServiceCode: this.ServiceCode,
    });
  }

  insertSenderv3() {
    this.customerInfoService.insertSendersv3(this.senders).subscribe();  
  }


}

&lt;button mat-raised-button (click)="insertSenderv3()" type="button" class="btn btn-success"&gt;Save&lt;/button&gt;

为什么参数对象 insertSendersv3(this.senders) 为空？（操作员变量 ID：“” 服务代码："" 短信标头："" VirtualMsisdn:"")

查看截图：

picture 1 picture 2

任何帮助将不胜感激。

谢谢

【问题讨论】：

你想要表单的json值吗？
是的，我想要表单的json值。
可以使用this.form.value获取表单的值
我试过了，但是如何绑定类Senderv3？
推送成功了，非常感谢

标签： arrays angular forms typescript

【解决方案1】：

当您使用 formBuilder 时，您不必创建如下控件：new FormControl('',Validators.required)

由于它是一个简单的表格，我会创建这样的表格：

  form: FormGroup;

  senders: Senderv3[] = [];

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.form = this.fb.group({
      VirtualMsisdn: ['' ,  Validators.required],
      OperatorVariantId: ['' ,  Validators.required],
      SmsHeader: ['' ,  Validators.required],
      ServiceCode: ['' ,  Validators.required],
    });
  }

  insertSenderv3() {
    this.senders.push(this.form.value);
    console.log(this.senders)
  }

现在，如果您最终单击按钮，this.form.value 将具有您的值，类型为 Senderv3。

我在 stackBlitz 上创建了一个示例。你可以检查这个：https://stackblitz.com/edit/angular-kxfynp

【讨论】：