How to pick up *ngFor Angular 7 item

Question

Personal I have a select where I select a company

 <div class="form-group col-md-12">
      <select class="form-control" name="Empresa" formControlName="Empresa">
        <option selected value="null">Selecione a Empresa</option>
        <option *ngFor="let empresa of Empresa; let i= index;">{{empresa.nomeFantasia}}</option>
      </select>
    </div>

and when I save this label with the company name, I should take the UF of this company to make a validation but it is not getting caught, so save in typescript is like this

    const empresa = this.form.get('Empresa').value;
    if (empresa === null) {
      this.servicesMessages.notification.exibirMensagemDeErro('A Empresa não foi informada');
      return;
    }

I thought I’d do something more or less at this level

    if (empresa.uf) {
        
    }

but it just takes the name of the company that was set, I’ve tried to create a Model, but I can’t pass the index, someone could help me?

Answer 1

When you call const empresa = this.form.get('Empresa').value; the value being sought is the property value option field. Since this property is null, the value passed is the value that is between the option tags, that is, the value {{empresa.nomeFantasia}}.

To solve your problem, I suggest you pass the full object as value:value="empresa":

 <div class="form-group col-md-12">
      <select class="form-control" name="Empresa" formControlName="Empresa">
        <option selected value="null">Selecione a Empresa</option>
        <option *ngFor="let empresa of Empresa; let i= index;" value="empresa">{{empresa.nomeFantasia}}</option>
      </select>
 </div>

And I also suggest that you call the Enterprise variable and take out the index that is not being used.

<option *ngFor="let empresa of empresas" value="empresa">{{empresa.nomeFantasia}}</option>

Then it will work:

if (empresa.uf) {
        // código aqui
    }

Answer 2

Use thus based in this example.

HTML

<!-- Form starts -->
<form [formGroup]="registrationForm" (ngSubmit)="onSubmit()">
    <select class="form-control" formControlName="controlEmpresa">
       <option selected [value]="null">Selecione a Empresa</option>
       <option *ngFor="let emp of Empresa;" [value]="emp.nomeFantasia">{{emp.nomeFantasia}}</option>
    </select>
    <button type="submit">Submit</button>
 </form>
 <!-- Form ends -->

Register Reactive Forms in @Ngmodule on app.module.ts

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    ReactiveFormsModule
  ]
})

TS

import { Component } from '@angular/core';
import { FormBuilder, Validators } from "@angular/forms";

@Component({
  // ...
})

export class AppComponent {

  empresaForm = this.fb.group({
    controlEmpresa: ['']
  });

  constructor(public fb: FormBuilder) { }

  onSubmit() {
    alert(JSON.stringify(this.empresaForm.value))
  }

}