Angular 4 – Error: formControlName debe usarse con una directiva padre formGroup

Solución:

Debe pasar formGroup (en su caso Formulario de contacto) al componente hijo que es ang-forma

engine-add-contact-form.html (modificado)

<form (ngSubmit)="onSubmit()" [formGroup]="contact_form">
<md-tab-group>
    <md-tab label="Form">
        <ang-form [group]="contact_form"></ang-form>
    </md-tab>
    <md-tab label="Email">
        <ang-email></ang-email>``
    </md-tab>
    <md-tab label="Message">
        <ang-message></ang-message>
    </md-tab>
</md-tab-group>
<button md-raised-button type="submit">Publish</button>

ang-form.html (modificado)

<div class="form-grid form-title" [formGroup]="group">
     <md-input-container>
         <input formControlName="contact_form_title" 
        class="form-title-field" mdInput placeholder="Title" value="">
     </md-input-container>
</div>

Agregar @Input () grupo: FormGroup; en su ang-form.component.ts

Hay muchas opciones para hacer esto.

1) Aquí hay un ejemplo que usa la directiva formControl y el sistema DI angular:

@Component({
  selector: 'ang-form',
  template: `
    <input [formControl]="control">
  `
})
export class AngForm {
  control: FormControl;

  constructor(private formGroupDir: FormGroupDirective) {}

  ngOnInit() {
    this.control = this.formGroupDir.control.get('contact_form_title') as FormControl;
  }
}

Ejemplo de Stackblitz

2) Otra forma de definir el proveedor de vista ControlContainer en el componente secundario:

@Component({
  selector: 'ang-form',
  template: `
     <input formControlName="contact_form_title">
    `,
  viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }]
})
export class AngForm { }

Ejemplo de Stackblitz

Para obtener más ejemplos, consulte:

• ¿Matrices anidadas en formas reactivas de Angular 2?

• Formulario basado en plantillas anidadas de Angular2

---

---

Utiliza Nuestro Buscador