无法在字符串上创建属性"验证器"

Question

我正在尝试创建一个Angular 5嵌套反应形式.

我开始创建一个平面形式,按预期工作,但只要我提取部分表单并将其作为子组件放置,我就会收到错误

错误TypeError:无法在字符串'addressFormGroup'上创建属性'validator'

如果我刚开始键入,则会在控制台中显示另一个错误

错误TypeError:this.form.get不是函数

我究竟做错了什么？我已经阅读了几个线程和教程来尝试解决这个问题,但我认为我错过了一些明显的东西.

import { Component, OnInit } from '@angular/core'
import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Address } from '../Property';

@Component({
moduleId: module.id,
selector: 'app-property-form',
templateUrl: './property-form.component.html',
styleUrls: ['./property-form.component.css']
})
export class PropertyFormComponent implements OnInit {

propertyForm: FormGroup;

constructor(private _formBuilder: FormBuilder) {}

ngOnInit() {
    this.createForm();
}

createForm() {
    this.propertyForm = this._formBuilder.group({
        saleOrLet: ['Sales', Validators.required],
        addressFormGroup: this.initAddress()
    })
}

initAddress() {
    return this._formBuilder.group({
        houseNameNumber: '',
        address2: '',
        postCode1: '',
        postCode2: ''
    })
}
}

工作形式

<form [formGroup]="propertyForm" novalidate>
<fieldset>
<legend>Address</legend>
<div formGroupName="addressFormGroup">
  <div class="form-group">
    <label>
      House Name Or Number:
      <input placeholder="15 Nursery ave" formControlName="houseNameNumber">
    </label>
  </div>
  ...other inputs follow the same pattern...
</div>
</fieldset>
</form>

破碎的形式(分成父子格式时)

亲

<form [formGroup]="propertyForm" novalidate>
  <fieldset>
    <legend>Address 2</legend>
    <app-property-form-address group="addressFormGroup"></app-property-form-address>
  </fieldset>
</form>

儿童

<div [formGroup]="group">
 <div class="form-group">
    <label>
      House Name Or Number:
      <input placeholder="15 Nursery ave" formControlName="houseNameNumber">
    </label>
  </div>
  ...other inputs follow the same pattern...
</div>

儿童组件

import { Component, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
   selector: 'app-property-form-address',
   templateUrl: './property-form-address.component.html',
})
export class PropertyFormAddressComponent {
    @Input() group: FormGroup;
}

Answer 1

您将表单组名称作为字符串而不是对formGroup的引用传递,并尝试将其类型化为FormGroup(group="addressFormGroup").group="addressFormGroup"不传递formGroup对象,它传递一个值为的字符串addressFormGroup.

Answer 2

如果您有以下情况，您可能会收到类似的错误消息：

<input formControl="startDate">

从文档来看它应该是：

<input formControlName="startDate">

一切都应该很好。

Answer 3

我遇到了同样的问题，我将form对象作为值传递，formGroup="form"但您需要form使用[]as绑定对象[formGroup]="form"。

请参阅下面的示例：

<form [formGroup]="form">
    // form-controls
</form>