无法在字符串上创建属性 'validator'

Question

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

我首先创建了一个平面表单，它按预期工作，但是当我提取部分表单并将其作为 child 组件放入时，我收到错误消息

ERROR TypeError: Cannot create property 'validator' on string 'addressFormGroup'

如果我刚开始输入，控制台会显示另一个错误

ERROR TypeError: this.form.get is not a function

我做错了什么？我已经阅读了几个线程和教程来尝试解决这个问题，但我认为我遗漏了一些明显的东西。

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>

格式不正确（拆分为 parent child 格式时）

Parent

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

Child

<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>

Child分量

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

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

参见下面的示例：

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

Answer 3

对我来说问题出在控制端，我不得不从

<input formControl="startDate">

至此

<input [formControl]="startDate">

所以这个结构应该可以工作

<form [formGroup]="form">
    // form-controls
    <input [formControl]="startDate">
</form>

Answer 4

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

<input formControl="startDate">

根据文档应该是：

<input formControlName="startDate">

一切都会好起来的。

Answer 5

同样的问题是因为formgroup和formControl的错误实现。通过以下实现解决了这个问题。

formGroup='' 重命名为 formGroupName=''.

formControl='' 重命名为 formControlName=''.

无法在字符串上创建属性 'validator'

Cannot create property 'validator' on string

angular

angular-forms

angular5

无法在字符串上创建 属性 'validator'

Cannot create property 'validator' on string

angular

angular-forms

angular5

无法在字符串上创建属性 'validator'