Блог

Я создаю форму, используя угловые формы. Я пытаюсь включить некоторую проверку в свою форму, но я сталкиваюсь с некоторыми проблемами. Я получаю следующее сообщение об ошибке при загрузке страницы.

Не удается прочитать свойство ‘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>
  

Это опечатка в 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],
    });
  }
  

Обновить

пример stackblizz с вашим кодом