TypeError:Angular5表单验证中未定义_co.nome [英] TypeError: _co.nome is undefined in Angular5 Form Validation

问题描述

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

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

这是出现的错误:

错误TypeError:_co.nome是未定义的堆栈跟踪:View_EmpresaCadastroComponent_0/< @ng:///EmpresaModule/EmpresaCadastroComponent.ngfactory.js:306:9debugUpdateDirectives @ webpack-internal:///./node_modules/@angular/core/esm5/core.js:14871:12checkAndUpdateView @ webpack-internal:///./node_modules/@angular/core/esm5/core.js:14018:5callViewAction @ webpack-internal:///../node_modules/@angular/core/esm5/core.js:14369:21

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.

EmpresaCadastroComponent类:

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:

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>

推荐答案

您正在组件 createForm 中使用 name ，将其更改为 nome .或者相反，在模板中将 nome 更改为 name :

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 ]
});

这篇关于TypeError:Angular5表单验证中未定义_co.nome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！