How to update the values of my form through a modal?

Question

I have a form to fill out a sale, this form will be assembled according to the information that the user will choose by modal. I can normally receive data from modal, but my form does not update the screen with the values I received, because of that I will not be able to complete the operation since the form is "invalid". Just follow my code:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController, 
AlertController, ModalController, Modal, LoadingController } from 'ionic- 
angular';
import { FormBuilder, Validators, FormGroup } from '@angular/forms';
import { DatePicker } from '@ionic-native/date-picker';
import { Venda } from '../../models/venda';
import * as moment from 'moment';
import 'moment/locale/pt-br';

@IonicPage()
@Component({
  selector: 'page-venda',
  templateUrl: 'venda.html',
})
export class VendaPage {

venda: Venda = {
  dataEmissao: moment().format('L'),
  dataEmissaoISOString: moment().toISOString(),
  mes: moment().format('MMMM'),
  ano: moment().format('YYYY'),
  status: 'concluida'
};
//hora: string = moment().format('LTS');
formVenda: FormGroup;
erroCliente: boolean = false;
erroItem: boolean = false;
erroDataEmissao: boolean = false;
erroCondicaoPgto: boolean = false;
mensagemErroCliente: string = '';
mensagemErroItem: string = '';
mensagemErroDataEmissao: string = '';
mensagemErroCondicaoPgto: string = '';
itensEscolhidos: any;
valores: Array<any>;
quantidades: Array<any>;
valoresTotaisCadaProduto: Array<any>;
loading: any;
idVenda: string = null;

constructor(public navCtrl: NavController, public navParams: NavParams,
  public toastCtrl: ToastController,
  public loadingCtrl: LoadingController,
  public datePicker: DatePicker,
  public modalCtrl: ModalController,
  public alertCtrl: AlertController,
  public formBuilder: FormBuilder) {

  this.formVenda = this.formBuilder.group({
    dataEmissao: [this.venda.dataEmissao, 
      Validators.compose([Validators.required])],
    nome: [this.venda.nome, Validators.compose([Validators.required])],
    itens: [this.venda.itens, Validators.compose([Validators.required])],
    condicaoPagamento: [this.venda.condicaoPamento, 
      Validators.compose([Validators.required])],
    observacao: [this.venda.observacoes, 
      Validators.compose([Validators.required])],
    dataEmissaoISOString: [this.venda.dataEmissaoISOString],
    mes: [this.venda.mes],
    ano: [this.venda.ano],
    status: [this.venda.status]
  })
  console.log(this.formVenda);
 }

 escolherCliente() {
   let tipo: any = 'pesquisarCliente';
   let modalEscolherCliente: Modal = 
   this.modalCtrl.create('EscolherContatoPage', {
    tipo: tipo
 });
 modalEscolherCliente.present();
 modalEscolherCliente.onWillDismiss((data => {
    this.formVenda.value.nome = data.nome;
    this.formVenda.value.idContato = data.id;
 }))
}

My method of choosing Client is responsible for returning modal customers, I can receive the parameters normally, but my form does not update the values.

My html:

<ion-item (tap)="escolherCliente()">
  <ion-label floating>Cliente</ion-label>
  <ion-input type="text" formControlName="nome" 
  [class.invalid]="!formVenda.controls.nome.valid"></ion-input>
</ion-item>

Answer 1

Instead of assigning the values, how about trying to set them using the form?

this.formVenda.get('nome').setValue(data.nome);
this.formVenda.get('idContato').setValue(data.id);