TypeError: _co.nome is undefined in Angular5 Form

问题:

I have the following problem when creating a simple form with validation in Angular.

This is the error presented:

ERROR TypeError: _co.nome is undefined Stack trace: View_EmpresaCadastroComponent_0/<@ng:///EmpresaModule/EmpresaCadastroComponent.ngfactory.js:306:9 debugUpdateDirectives@webpack-internal:///./node_modules/@angular/core/esm5/core.js:14871:12 checkAndUpdateView@webpack-internal:///./node_modules/@angular/core/esm5/core.js:14018:5 callViewAction@webpack-internal:///./node_modules/@angular/core/esm5/core.js:14369:21

This is happening to any field on my form.

Class EmpresaCadastroComponent:

import { Component, OnInit, Input } from '@angular/core';

import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-empresa-cadastro',
  templateUrl: './empresa-cadastro.component.html',
  styleUrls: ['./empresa-cadastro.component.css']
})
export class EmpresaCadastroComponent implements OnInit {

  @Input() empresa = {};

  empresaForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.createForm();
  }

  createForm() {
    this.empresaForm = this.fb.group({
      nome: [ '', Validators.required ],
      cpf: [ '', Validators.required ],
      email: [ '', Validators.required ],
      status: [ '', Validators.required ]
    });
  }

  onSubmit() {
    const empresa = this.empresaForm.value;
    console.log('Empresa: ', empresa);
  }

  limpar() {
    this.empresaForm.reset();
  }

  ngOnInit() {
  }

}

empresa-cadastro.component:

<form novalidate [formGroup]="empresaForm">

  <fieldset>
    <div class="form-group" [ngClass]="{
        'has-danger': nome.invalid && (nome.dirty || nome.touched),
        'has-success': nome.valid && (nome.dirty || nome.touched)
      }">
      <label>Nome empresa</label>
      <input type="text" class="form-control" formControlName="nome" required>
      <div class="form-control-feedback" *ngIf="nome.errors && (nome.dirty || nome.touched)">
        <p *ngIf="nome.errors.required">First Name is required</p>
      </div>
    </div>
  </fieldset>

  <fieldset>
    <div class="form-group" [ngClass]="{
        'has-danger': cpf.invalid && (cpf.dirty || cpf.touched),
        'has-success': cpf.valid && (cpf.dirty || cpf.touched)
      }">
      <label>CPF</label>
      <input type="text" class="form-control" formControlName="cpf" required>
      <div class="form-control-feedback" *ngIf="cpf.errors && (cpf.dirty || cpf.touched)">
        <p *ngIf="cpf.errors.required">First Name is required</p>
      </div>
    </div>
  </fieldset>

  <fieldset>
    <div class="form-group" [ngClass]="{
        'has-danger': email.invalid && (email.dirty || email.touched),
        'has-success': email.valid && (email.dirty || email.touched)
   }">
      <label>Email</label>
      <input type="email" class="form-control" formControlName="email" required>
      <div class="form-control-feedback" *ngIf="email.errors && (email.dirty || email.touched)">
        <p *ngIf="email.errors.required">Email is required</p>
      </div>
    </div>
  </fieldset>

  <fieldset>
    <div class="form-group" [ngClass]="{
        'has-danger': status.invalid && (status.dirty || status.touched),
        'has-success': status.valid && (status.dirty || status.touched)
      }">
      <label>Status</label>
      <input type="text" class="form-control" formControlName="status" required>
      <div class="form-control-feedback" *ngIf="status.errors && (status.dirty || status.touched)">
        <p *ngIf="status.errors.required">First Name is required</p>
      </div>
    </div>
  </fieldset>

  <pre>{{empresaForm.value | json}}</pre>
</form>

回答1:

You are using name inside your component createForm, change this to nome. Or the other way around, change nome to name in your template:

this.empresaForm = this.fb.group({
  nome: [ '', Validators.required ],
  cpf: [ '', Validators.required ],
  email: [ '', Validators.required ],
  status: [ '', Validators.required ]
});