[英]Getting error on Angular app: TypeError: Cannot read property 'then' of undefined
[英]Getting 'TypeError: Cannot read property 'errors' of undefined' in my Angular Form
我想要一个 Reactive 表单来创建客户端,但是,当我为我的应用程序提供服务时,我在控制台中收到此错误:
TypeError: Cannot read property 'errors' of undefined
它指向这个块的第一个<li>
元素:
<ul class="help-block">
<li *ngIf="form.controls.email.errors?.required && form.controls.email.dirty">Required</li>
<li *ngIf="(form.controls.email.errors?.minlength || form.controls.email.errors?.maxlength) && form.controls.email.dirty">Minimum chars: 5, maximum 35</li>
</ul>
完整形式代码:
<form style="border:1px solid" [formGroup]="form"
(submit)="onRelatieSubmit()">
<h4> New client </h4>
<div class="form-group">
<label for="company">Company</label>
<div class="col-5">
<input [ngClass]="{'is-invalid': (form.controls.company.errors &&
form.controls.company.dirty),
'is-valid': !form.controls.company.errors}" class="form-control" type="text" name="company" (autocomplete)="off" placeholder="Name" formControlName="company" (blur)="checkUsername()"/>
<ul class="help-block">
<li *ngIf="form.controls.company.errors?.required && form.controls.company.dirty">Required</li>
<li *ngIf="(form.controls.company.errors?.minlength || form.controls.company.errors?.maxlength) && form.controls.company.dirty">Minimum chars: 5, maximum 25</li>
</ul>
</div>
</div>
<div class="form-group">
<label for="addressLineOne">Address</label>
<div class="col-5">
<input [ngClass]="{'is-invalid': (form.controls.addressLineOne.errors && form.controls.addressLineOne.dirty) ,
'is-valid': !form.controls.addressLineOne.errors}" id="addressLineOne" class="form-control" type="text" name="addressLineOne" (autocomplete)="off" placeholder="Address" formControlName="addressLineOne" (blur)="checkEmail()"/>
<ul class="help-block">
<li *ngIf="form.controls.addressLineOne.errors?.required && form.controls.addressLineOne.dirty">Requiredt</li>
</ul>
</div>
</div>
<div class="form-group">
<label for="city">City</label>
<div class="col-5">
<input [ngClass]="{'is-invalid': (form.controls.city.errors && form.controls.city.dirty), 'is-valid': !form.controls.city.errors}" id="city" class="form-control" type="text" name="city" (autocomplete)="off" placeholder="City" formControlName="city"/>
<ul class="help-block">
<li *ngIf="form.controls.city.errors?.required && form.controls.city.dirty">Requiredt</li>
</ul>
</div>
</div>
</div>
<div class="form-group">
<label for="email">Email</label>
<div class="col-5">
<input [ngClass]="{'is-invalid': (form.controls.email.errors && form.controls.email.dirty),
'is-valid': !form.controls.email.errors}" id="email" class="form-control" type="text" name="email" (autocomplete)="off" placeholder="Email" formControlName="email"/>
<ul class="help-block">
<li *ngIf="form.controls.email.errors?.required && form.controls.email.dirty">Required</li>
<li *ngIf="(form.controls.email.errors?.minlength || form.controls.email.errors?.maxlength) && form.controls.email.dirty">Minimum chars: 5, maximum 35</li>
</ul>
</div>
</div>
<div class="form-group">
<label for="country">Country</label>
<div class="col-5">
<input [ngClass]="{'is-invalid': (form.controls.country.errors && form.controls.country.dirty) , 'is-valid': !form.controls.country.errors}" id="country" class="form-control" type="text" name="country" (autocomplete)="off" placeholder="Country" formControlName="country"/>
<ul class="help-block">
<li *ngIf="form.controls.country.errors?.required && form.controls.country.dirty">Required</li></ul>
</div>
</div>
<div class="form-group">
<label for="postalCode">Postal code</label>
<div class="col-5">
<input [ngClass]="{'is-invalid': (form.controls.postalCode.errors && form.controls.postalCode.dirty) , 'is-valid': !form.controls.postalCode.errors}" id="postalCode" class="form-control" type="text" name="postalCode" (autocomplete)="off" placeholder="Postal Code" formControlName="postalCode"/>
<ul class="help-block">
<li *ngIf="form.controls.postalCode.errors?.required && form.controls.postalCode.dirty">Required</li></ul>
</div>
</div>
<div class="form-group">
<label for="phone">Phone</label>
<div class="col-5">
<input [ngClass]="{'is-invalid': (form.controls.phone.errors && form.controls.phone.dirty), 'is-valid': !form.controls.phone.errors}" id="phone" class="form-control" type="text" name="phone" (autocomplete)="off" placeholder="Aantal kilometers" formControlName="phone"/>
<ul class="help-block">
<li *ngIf="form.controls.phone.errors?.required && form.controls.phone.dirty">Required</li></ul>
</div>
</div>
<input [disabled]="!form.valid || processing" type="submit" class="btn btn-primary" value="Submit" />
</form>
这是我在 `client.component.ts' 中的 CreateForm 函数
createForm() {
this.form = this.formBuilder.group(
{
company: ['', Validators.compose([
Validators.required,
Validators.minLength(5),
Validators.maxLength(35),
])],
addressLineOne: ['', Validators.compose([
Validators.required,
Validators.minLength(3),
Validators.maxLength(35),
])],
city: ['', Validators.compose([
Validators.required,
Validators.minLength(8),
Validators.maxLength(35),
])],
country: ['', Validators.compose([
Validators.required,
Validators.minLength(3),
Validators.maxLength(35),
])],
postalCode: ['', Validators.compose([
Validators.required,
Validators.minLength(3),
Validators.maxLength(35),
])],
phone: ['', Validators.compose([
Validators.required,
Validators.minLength(3),
Validators.maxLength(35),
])],
email: ['', Validators.compose([
Validators.required,
Validators.minLength(3),
Validators.maxLength(35),
])],
}
)
}
为什么说电子邮件未定义? 我不明白,我已经在 formbuilder.group 中声明了如果您需要更多信息,请告诉我
In.ts写
get addressLineOne() {
return this.form.get('addressLineOne');
}
在 html 中:
<ul class="help-block">
<li *ngIf="addressLineOne.errors?.required && addressLineOne.dirty">Requiredt</li>
</ul>
尝试此操作以查看错误是否不再存在并且表单是否呈现:
<ul class="help-block" *ngIf="form.controls.email">
<li *ngIf="form.controls.email.errors?.required && form.controls.email.dirty">Required</li>
<li *ngIf="(form.controls.email.errors?.minlength || form.controls.email.errors?.maxlength) && form.controls.email.dirty">Minimum chars: 5, maximum 35</li>
</ul>
您可以尝试其他方法,而不是手动将所有错误消息添加到您的 html,这可能有助于解决问题,因为它涵盖了所有可能的错误并从 html 进行更有组织的调用。
(这只是一个示例代码,所以请根据您的要求进行修改)
在 your.component 文件中添加一个新属性并为所有要求添加消息。 重要的部分,如果要求的数量和消息(以及类型的名称)应该匹配。
validation_messages = {
'name': [
{ type: 'required', message: 'Name is required.' }
],
'email': [
{ type: 'required', message: 'Email is required.' },
{ type: 'email', message: 'Please enter a valid email.' }
],
'password': [
{ type: 'required', message: 'Password is required.' },
{ type: 'minlength', message: 'Password must be at least 5 characters long.' },
{ type: 'pattern', message: 'Your password must contain at least one uppercase, one lowercase, and one number.' }
};
在每个输入块之后的 html 文件中:
(在这个例子中 [formGroup]="validations_form")
<div class="validation-errors">
<ng-container *ngFor="let validation of validation_messages.name">
<div class="error-message"
*ngIf="validations_form.get('name').hasError(validation.type)
&& (validations_form.get('name').dirty
|| validations_form.get('name').touched)">
{{ validation.message }}
</div>
</ng-container>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.