Угловой 7 заполнить форму ввода

Question

У меня проблема с заполнением данных при вводе в FormGroup.

У меня есть переменная Company с большим количеством данных в ней.

Я создаю formGroup со всеми этими данными:

this.EditCoForm = this.formBuilder.group({
      coid: ['', [Validators.required]],
      coname: ['', [Validators.required]],
      service: [null,],
      address: ['', [Validators.required]],
      state: ['', [Validators.required]],
      zip: ['', [Validators.required]],
      city: ['', [Validators.required]],
      country: ['', [Validators.required]],
      size: [null, [Validators.required]],
      domain: [null, [Validators.required]],
      duns: [null,],
      tid1: ['', [Validators.required]],
      numid1: ['', [Validators.required]],
      tid2: [null,],
      numid2: [null,],
      tid3: [null,],
      numid3: ['',],
      bankname: ['', [Validators.required]],
      bicswift: ['', [Validators.required]],
      iban: ['', [Validators.required]],
      bogid: [,[Validators.required]],
});

Я хочу поместить значения из переменной "Company" в EditCoForm и в поля ввода текста HTML.

<div class="form-field">
   <label class="text-white">ID</label>
   <br>
   <input formControlName="coid" value="company.coid">
</div> 

На странице HTML нам нужно значение "company.coid""но в EditCoForm при отправке это ''.

Итак, как обработать, чтобы поместить: (я нуб в Angular) значения" company "в EditCoForm и в полях HTML?

Большое спасибо за помощь.

Answer 1

Я хочу поместить значения из переменной "Компания" в EditCoForm и поля ввода текста HTML.

Эти значения необходимо указывать (от company) при создании группы форм:

// suppose company is
company = {
  coid: 'coid',
  coname: 'coname'
}

this.EditCoForm = this.formBuilder.group({
  coid: [this.company.coid, [Validators.required]],
  coname: [this.company.coname, [Validators.required]],
  ...

Тогда оба элемента управления формы с соответствующими именами и входными значениями (в шаблоне HTML) будут иметь значения от company:

<form [formGroup]="EditCoForm">
  <div class="form-field">
  <label class="text-white">ID</label><br>
    <input formControlName="coid">
  </div>
 ...  

</form>

Или, если это невозможночтобы сделать это при создании группы форм, вы также можете установить значения для группы форм следующим образом:

this.EditCoForm.setValue({
  coid: this.company.coid,
  coname: this.company.coname,
  ...

});

Здесь stackblitz