Я создаю форму, используя угловые формы.Я пытаюсь включить некоторые проверки в мою форму, но я сталкиваюсь с некоторыми проблемами.Я получаю следующее сообщение об ошибке при загрузке страницы.
Невозможно прочитать свойство 'errors' of null
Теперь это для третьего поля ввода, которое является 'address'.Первые два в порядке.Любая идея, почему это происходит.
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');
}
}
advert.component.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>