![](/img/trans.png)
[英]Javascript Cannot read property 'addEventListener' of null errors
[英]Cannot read property 'errors' of null
我正在使用角度形式創建一個表單。 我試圖在我的表單中包含一些驗證,但我遇到了一些問題。 我在頁面加載時收到以下錯誤消息。
無法讀取 null 的屬性“錯誤”
現在這是第三個輸入字段,即“地址”。 前兩個還好。 知道為什么會發生這種情況。
advert.component.ts
import { Component, OnInit } from '@angular/core';
import { AdvertService } from '../_services/advert.service';
import { Property } from '../_models/property';
import { Photo } from '../_models/photo';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { AlertifyService } from '../_services/alertify.service';
@Component({
selector: 'app-advert',
templateUrl: './advert.component.html',
styleUrls: ['./advert.component.css']
})
export class AdvertComponent implements OnInit {
property: Property;
Photo: Photo;
advertForm: FormGroup;
constructor(private advertService: AdvertService, private alertify: AlertifyService, private formBuilder: FormBuilder) { }
ngOnInit() {
this.createAdvertForm();
}
createAdvertForm() {
this.advertForm = this.formBuilder.group({
town: ['', Validators.required],
county: ['', Validators.required],
address: ['', Validators.required],
postocde: ['', Validators.required],
eircode: ['', Validators.required],
propertyType: ['', Validators.required],
sellingType: ['', Validators.required],
price: ['', Validators.required],
bedrooms: ['', [Validators.required, Validators.minLength(1), Validators.maxLength(8)]],
bathrooms: ['', [Validators.required, Validators.minLength(1), Validators.maxLength(8)]],
size: ['', Validators.required],
buildingEnergyRating: ['', Validators.required],
description: ['', Validators.required],
});
}
submitAdvert() {
console.log(this.advertForm.value);
this.alertify.success('Advert Submitted');
}
}
廣告組件.html
<div class="container">
<form [formGroup]="advertForm" (ngSubmit)="submitAdvert()">
<h2 class="text-center text-primary">Fill out the form below</h2>
<hr>
<div class="form-group">
<input type="text" class="form-control" formControlName="town" placeholder="Town"
[ngClass]="{'is-invalid': advertForm.get('town').errors && advertForm.get('town').touched}">
<div class="invalid-feedback">Please select a town.</div>
</div>
<div class="form-group">
<input type="text" class="form-control" formControlName="county" placeholder="County"
[ngClass]="{'is-invalid': advertForm.get('county').errors && advertForm.get('county').touched}">
<div class="invalid-feedback">Please select a county.</div>
</div>
<div class="form-group">
<input type="text" class="form-control" formControlName="address" placeholder="address"
[ngClass]="{'is-invalid': advertForm.get('address').errors && advertForm.get('address').touched}">
<div class="invalid-feedback">Please select a address.</div>
</div>
<div class="form-group">
<input type="text" class="form-control" formControlName="postcode" placeholder="postcode"
[ngClass]="{'is-invalid': advertForm.get('postcode').errors && advertForm.get('postcode').touched}">
<div class="invalid-feedback">Please select a postcode.</div>
</div>
<div class="form-group">
<input type="text" class="form-control" formControlName="eircode" placeholder="eircode"
[ngClass]="{'is-invalid': advertForm.get('eircode').errors && advertForm.get('eircode').touched}">
<div class="invalid-feedback">Please select a eircode.</div>
</div>
<div class="form-group">
<input type="text" class="form-control" formControlName="propertyType" placeholder="propertyType"
[ngClass]="{'is-invalid': advertForm.get('propertyType').errors && advertForm.get('propertyType').touched}">
<div class="invalid-feedback">Please select a property type.</div>
</div>
<div class="form-group">
<input type="text" class="form-control" formControlName="sellingType" placeholder="sellingType"
[ngClass]="{'is-invalid': advertForm.get('sellingType').errors && advertForm.get('sellingType').touched}">
<div class="invalid-feedback">Please select a sellingType.</div>
</div>
<div class="form-group">
<input type="text" class="form-control" formControlName="price" placeholder="price"
[ngClass]="{'is-invalid': advertForm.get('price').errors && advertForm.get('price').touched}">
<div class="invalid-feedback">Please select a price.</div>
</div>
<div class="form-group">
<input type="text" class="form-control" formControlName="bedrooms" placeholder="bedrooms"
[ngClass]="{'is-invalid': advertForm.get('bedrooms').errors && advertForm.get('bedrooms').touched}">
<div class="invalid-feedback">Please select a bedrooms.</div>
</div>
<div class="form-group">
<input type="text" class="form-control" formControlName="bathrooms" placeholder="bathrooms"
[ngClass]="{'is-invalid': advertForm.get('bathrooms').errors && advertForm.get('bathrooms').touched}">
<div class="invalid-feedback">Please select a bathrooms.</div>
</div>
<div class="form-group">
<input type="text" class="form-control" formControlName="size" placeholder="size"
[ngClass]="{'is-invalid': advertForm.get('size').errors && advertForm.get('size').touched}">
<div class="invalid-feedback">Please select a size.</div>
</div>
<div class="form-group">
<input type="text" class="form-control" formControlName="buildingEnergyRating" placeholder="buildingEnergyRating"
[ngClass]="{'is-invalid': advertForm.get('buildingEnergyRating').errors && advertForm.get('buildingEnergyRating').touched}">
<div class="invalid-feedback">Please select a Building Energy Rating.</div>
</div>
<div class="form-group">
<input type="text" class="form-control" formControlName="buildingEnergyRating" placeholder="buildingEnergyRating"
[ngClass]="{'is-invalid': advertForm.get('buildingEnergyRating').errors && advertForm.get('buildingEnergyRating').touched}">
<div class="invalid-feedback">Please select a buildingEnergyRating.</div>
</div> -->
<button class="btn btn-primary" type="submit">Submit</button>
</form>
</div>
<p>Form Value: {{advertForm.value | json}}</p>
<p>Form Status: {{advertForm.status | json}}</p>
這是postocde
的一個錯字
createAdvertForm() {
this.advertForm = this.formBuilder.group({
town: ['', Validators.required],
county: ['', Validators.required],
address: ['', Validators.required],
postocde: ['', Validators.required], <------ here
eircode: ['', Validators.required],
propertyType: ['', Validators.required],
sellingType: ['', Validators.required],
price: ['', Validators.required],
bedrooms: ['', [Validators.required, Validators.minLength(1), Validators.maxLength(8)]],
bathrooms: ['', [Validators.required, Validators.minLength(1), Validators.maxLength(8)]],
size: ['', Validators.required],
buildingEnergyRating: ['', Validators.required],
description: ['', Validators.required],
});
}
更新
如果您使用的是vscode,則存在與您的問題相關的問題:
https://github.com/angular/vscode-ng-language-service/issues/149
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.