Question

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

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

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

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

错误类型错误：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 [formControl]="startDate">

所以这种结构应该起作用

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

Answer 3

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

<input formControl="startDate">

从文档中应为：

<input formControlName="startDate">

一切都会好起来的。

Answer 4

我遇到了同样的问题，我将form传递给变量formGroup="form"，但正确的方法是将[]周围的formGroup设置为[formGroup]="form"。

请参见以下示例：

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

Answer 5

由于表单组的错误实现，同样的问题发生了。通过以下实现修复了这个问题。

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

无法在字符串

5 个答案: