Angular 4 - ошибка: formControlName должно использоваться с родительской директивой formGroup

Question

Я добавляю form поля ввода с использованием компонента -

двигатель-надстройка контакт-form.html

<form (ngSubmit)="onSubmit()" [formGroup]="contact_form">
<md-tab-group>
    <md-tab label="Form">
        <ang-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>

анг-form.html

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

Таким же образом я добавил другие компоненты (ang-email ang-message) HTML.

я добавил [formGroup] директива в engine-add-form.ts

export class EngineAddFormComponent{

contact_form: any;

form_value: any;

constructor(){
    this.contact_form = new FormGroup({
        contact_form_title: new FormControl('', Validators.minLength(2)),
        ........
        ........
    });
}
onSubmit(){
    this.form_value = JSON.stringify(this.contact_form.value);
    console.log(this.form_value);
}
}

Я получаю следующую ошибку -

Ошибка: formControlName должно использоваться с родительской директивой formGroup. Вы захотите добавить директиву formGroup и передать ей существующий экземпляр FormGroup (вы можете создать его в своем классе).

Я не могу понять, что не так с моим кодом.

Answer 1

Вам нужно передать formGroup (в вашем случае contact_form) дочернему компоненту ang-form

Двигатель-надстройки контактно-form.html(модифицированный)

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

анг-form.html(модифицированный)

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

Добавьте группу @Input(): FormGroup; в вашем ang-form.component.ts

Answer 2

Есть много вариантов сделать это.

Вот пример, который использует директиву formControl и угловую систему DI:

@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;
  }
}

Пример Stackblitz

Больше примеров смотрите

• Вложенные массивы в Angular 2 реактивные формы?

Answer 3

      <form [formGroup]="guestForm" novalidate>
    <div class="panel-body">
        <form> -> Remove this
            <div class="col-md-12 col-sm-12">
                <div class="form-group col-md-3 col-sm-6">
                    <label>First Name*  </label>
                    <input formControlName="firstname" type="text" class="form-control input-sm">
                </div>
            </div>
        </form> -> Remove this
    </div>
</form>

Answer 4

Оберните ввод в div и передайте formGroup в div:

<div [formGroup]="formGroup">
  <input ...>
</div>