Ionic 3 无法获取未定义或空引用的属性'valid'

Question

im 尝试在我与 Firebase 一起使用的 crud 上设置一个表单，最初我只存储一个名称和数字，两者都作为字符串传递，我添加了更多参数，这些参数也是字符串类型，但是我开始得到 无法获得未定义或空引用的属性"有效"，我尝试了一些修复程序，但我不能幸运......这是我.html文件

联系编辑.html

<ion-header>
<ion-navbar color="primary">
<ion-title>{{ title }}</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<form [formGroup]="form">
<ion-item>
<ion-label stacked>Unidade</ion-label>
<ion-input type="text" formControlName="unidade"></ion-input>
</ion-item>
<ion-item *ngIf="!form.controls.unidade.valid && (form.controls.unidade.dirty || form.controls.unidade.touched)" color="danger">
<div [hidden]="!form.controls.name.errors.required">
O campo é obrigatório
</div>
</ion-item>
<ion-item>
<ion-label stacked>Endereço</ion-label>
<ion-input type="text" formControlName="endereco"></ion-input>
</ion-item>
<ion-item *ngIf="!form.controls.endereco.valid && (form.controls.endereco.dirty || form.controls.endereco.touched)" color="danger">
<div [hidden]="!form.controls.endereco.errors.required">
O campo é obrigatório
</div>
</ion-item>
<ion-item>
<ion-label stacked>Horario</ion-label>
<ion-input type="text" formControlName="hour"></ion-input>
</ion-item>
<ion-item *ngIf="!form.controls.hour.valid && (form.controls.hour.dirty || form.controls.hour.touched)" color="danger">
<div [hidden]="!form.controls.hour.errors.required">
O campo é obrigatório
</div>
</ion-item>

<ion-item>
<ion-label stacked>Telefone</ion-label>
<ion-input type="text" formControlName="tel"></ion-input>
</ion-item>
<ion-item *ngIf="!form.controls.tel.valid && (form.controls.tel.dirty || form.controls.tel.touched)" color="danger">
<div [hidden]="!form.controls.tel.errors.required">
O campo é obrigatório
</div>
</ion-item>

<ion-item>
<ion-label stacked>Data</ion-label>
<ion-input type="text" formControlName="date"></ion-input>
</ion-item>
<ion-item *ngIf="!form.controls.date.valid && (form.controls.date.dirty || form.controls.date.touched)" color="danger">
<div [hidden]="!form.controls.date.errors.required">
O campo é obrigatório
</div>
</ion-item>

<div padding>
<button ion-button block type="submit" [disabled]="!form.valid" (click)="onSubmit()">Salvar</button>
</div>
</form>
</ion-content>

如果它有帮助，这里是联系人编辑.ts

import { ContactProvider } from './../../providers/contact/contact';
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@IonicPage()
@Component({
selector: 'page-contact-edit',
templateUrl: 'contact-edit.html',
})
export class ContactEditPage {
title: string;
form: FormGroup;
contact: any;
constructor(
public navCtrl: NavController, public navParams: NavParams,
private formBuilder: FormBuilder, private provider: ContactProvider,
private toast: ToastController) {
// maneira 1
//this.contact = this.navParams.data.contact || { };
//this.createForm();
// // maneira 2
this.contact = { };
this.createForm();
if (this.navParams.data.key) {
const subscribe = this.provider.get(this.navParams.data.key).subscribe((c: any) => {
subscribe.unsubscribe();
this.contact = c;
this.createForm();
})
}
this.setupPageTitle();
}
private setupPageTitle() {
this.title = this.navParams.data.contact ? 'Alterando Consulta' : 'Nova consulta';
}
createForm() {
this.form = this.formBuilder.group({
key: [this.contact.key],
unidade: [this.contact.unidade, Validators.required],
endereco: [this.contact.endereco, Validators.required],
horario: [this.contact.endereco, Validators.required],
tel: [this.contact.tel, Validators.required],
date: [this.contact.date, Validators.required]
});
}
onSubmit() {
if (this.form.valid) {
this.provider.save(this.form.value)
.then(() => {
this.toast.create({ message: 'Contato salvo com sucesso.', duration: 3000 }).present();
this.navCtrl.pop();
})
.catch((e) => {
this.toast.create({ message: 'Erro ao salvar o contato.', duration: 3000 }).present();
console.error(e);
})
}
}
}

具体来说，这些是我得到的错误

> ERROR TypeError: Cannot read property 'valid' of undefined
at Object.eval [as updateDirectives] (ContactEditPage.html:33)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:14697)
at checkAndUpdateView (core.js:13844)
at callViewAction (core.js:14195)
at execComponentViewsAction (core.js:14127)
at checkAndUpdateView (core.js:13850)
at callViewAction (core.js:14195)
at execEmbeddedViewsAction (core.js:14153)
at checkAndUpdateView (core.js:13845)
at callViewAction (core.js:14195)

Answer 1

我认为您在此处的表单组中缺少hour控件。