Question

我想创建一个带有formGroup的子组件并添加验证，但是我收到一个错误，因为子组件没有察觉到它在父组件的内部＆＃34;形式＆＃34;

我怎么能解决这个问题？

父亲组成部分：

<form [formGroup]="formulario">
    <app-campo [(propiedad)]="usuario.correo"
                               placeholder="title"
                               email="true"
                               [(formulario)]="formulario"
                    ></app-campo>
  </form>

子组件：

<h3>Label</h3>
    <input
           placeholder="{{placeholder}}"
           [(ngModel)]="valorPropiedad"
           name="campo"
           (ngModelChange)="cambiar($event)"
           formControlName="campo"
           type="{{tipoInput}}">

https://plnkr.co/edit/iyvemjyYAq6hY4jzHihu?p=preview

Answer 1

尝试以下解决方案：

将父组件“ formGroup”与子组件连接   'formControlName'

在父组件模板中
<form [formGroup]="recipeForm">
<app-recipe-name [parent]="recipeForm"></app-recipe-name>
</form>
在“子级”组件中的“添加”类下
@Input() parent: FormGroup;
在子组件模板中
<mat-input-container fxFill [formGroup]="parent">
   <input matInput placeholder="Recipe Name" [matAutocomplete]="recipeAutocomplete" formControlName="recipeName">
</mat-input-container>
现在可以从父级访问“ recipeName”

通过：https://gist.github.com/canabady/3e4b96717057411510f2dc8c7ddfdaf7

Answer 2

在子组件中

，如果不指定formControlName，则无法指定formGroup，因此您需要在子组件中添加formGroup：

子组件代码：

<div [formGroup]="formulario">
      <h3>Label</h3>
      <input
           placeholder="{{placeholder}}"
           [(ngModel)]="valorPropiedad"
           name="campo"
           (ngModelChange)="cambiar($event)"
           formControlName="campo"
           type="{{tipoInput}}">
</div>

问候，

在子组件中传递formGroup（Angular 5）

2 个答案: