Wsrtjtyk

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>

Why parameter object insertSendersv3(this.senders) are empty? (OperatorVariantId:""
ServiceCode:""
SmsHeader:""
VirtualMsisdn:"")

see screenshots:

picture 1
picture 2

Any help would be highly appreciated.

Thanks

When you are using formBuilder , you don't have to create a control like : new FormControl('',Validators.required)

Since its a simple form , i would create the form something like this :

  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)

  }

Now if you end up clicking the button , the this.form.value will have your value which will be of type Senderv3 .

I have created an example on stackBlitz . You can check this : https://stackblitz.com/edit/angular-kxfynp