#javascript #html #angular
#javascript #HTML #angular
Вопрос:
Я создаю форму, используя угловые формы. Я пытаюсь включить некоторую проверку в свою форму, но я сталкиваюсь с некоторыми проблемами. Я получаю следующее сообщение об ошибке при загрузке страницы.
Не удается прочитать свойство ‘errors’ с нулевым значением
Теперь это для третьего поля ввода, которое является ‘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 amp;amp; 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 amp;amp; 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 amp;amp; 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 amp;amp; 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 amp;amp; 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 amp;amp; 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 amp;amp; 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 amp;amp; 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 amp;amp; 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 amp;amp; 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 amp;amp; 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 amp;amp; 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 amp;amp; 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>
Комментарии:
1. Похоже, в вашем вопросе отсутствуют некоторые детали: где остальная часть этой ошибки? (например, где находится трассировка дорожки, в которой указано, в каком файле это произошло, с каким номером строки и т.д.?
2. Вы неправильно написали почтовый индекс в
advert.component.ts
. В этом причина?3. Нет. Это все еще не работает
4.не уверен, при каких обстоятельствах
null
может быть возвращено изform.get
, но если это связано с элементами управления формой, которые еще не инициализируются во время вычисления выражения, тогда вы можете использовать оператор безопасной навигации?.
для решения этой проблемы. Пример:advertForm.get('county')?.errors
.5. Работает нормально stackblitz.com/edit /…
Ответ №1:
Это опечатка в 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],
});
}
Обновить
Комментарии:
1. Это было бы более поздней проблемой. Это не решает исходную проблему, которая влияет на ввод адреса
2. @AndreMacNamara пожалуйста, взгляните на пример и создайте его самостоятельно с проблемой.