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

Question

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

这是出现的错误：

ERROR TypeError: _co.nome is undefined Stack trace: View_EmpresaCadastroComponent_0/

这发生在我表单上的任何字段上。

类 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

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

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