Question

在Angular中创建一个带验证的简单表单时，我遇到以下问题。

这是出现的错误：

错误类型错误：_co.nome未定义堆栈跟踪： View_EmpresaCadastroComponent_0 /＆LT; @ng：///EmpresaModule/EmpresaCadastroComponent.ngfactory.js：306：9 debugUpdateDirectives @的WebPack内部：///./node_modules/@angular/core/esm5/core.js：14871：12 checkAndUpdateView @的WebPack内部：///./node_modules/@angular/core/esm5/core.js：14018：5 callViewAction @的WebPack内部：///./node_modules/@angular/core/esm5/core.js：14369：21

我的表单上的任何字段都会发生这种情况。

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>

Answer 1

您在组件name中使用createForm，将其更改为nome。或者反过来，在模板中将nome更改为name：

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

TypeError：_co.nome在Angular5表单验证中未定义

1 个答案: