在Angular中创建一个带验证的简单表单时,我遇到以下问题。
这是出现的错误:
错误类型错误:_co.nome未定义堆栈跟踪: View_EmpresaCadastroComponent_0 /< @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>
答案 0 :(得分:1)
您在组件name
中使用createForm
,将其更改为nome
。或者反过来,在模板中将nome
更改为name
:
this.empresaForm = this.fb.group({
nome: [ '', Validators.required ],
cpf: [ '', Validators.required ],
email: [ '', Validators.required ],
status: [ '', Validators.required ]
});