Question

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();  
  }


}

<button mat-raised-button (click)="insertSenderv3()" type="button" class="btn btn-success">Save</button>

为什么参数对象insertSendersv3（this.senders）为空？（OperatorVariantId：“” 服务代码：“” SmsHeader：“” VirtualMsisdn：“”）

查看屏幕截图：

picture 1 picture 2

任何帮助将不胜感激。

谢谢

Answer 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

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

1 个答案: