Question

我正在使用角度形式创建形式。我试图在表单中包含一些验证，但是遇到了一些问题。我在页面加载时收到以下错误消息。

无法读取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');
  }
}

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>

Answer 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],
    });
  }

更新

stackblizz example with your code

Answer 2

如果您使用的是vscode，则存在与您的问题相关的问题：

https://github.com/angular/vscode-ng-language-service/issues/149

无法读取null的属性“错误”

2 个答案: