Error Error: Formcontrolname Must Be Used With a Parent Formgroup Directive

Error: formControlName must be used with a parent formGroup directive. You'll want to add a formGroup directive - Angular reactive forms

You have nested form tag inside form tag with FormGroup directive, remove it:

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

How can i fix Error: formControlName must be used with a parent formGroup directive. - Angular ReactiveForms FormBuilder

The error was in another form in same component. Another form without <form [formGroup]="FormGroupName"> parent..

Check if there is another form without a parent container with [formGroup]

Angular - components inside form - formControlName must be used with a parent

If you want to have custom form controls, make them implement ControlValueAccessor from @angular/forms.

export interface ControlValueAccessor {
  writeValue(obj: any) : void;
  registerOnChange(fn: any) : void;
  registerOnTouched(fn: any) : void;
}

Then register the components to the NG_VALUE_ACCESSOR token:

  providers: [
    { 
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => MyAwesomeComponent(),
      multi: true
    }
  ]

Rant:

Take a step back and look at what you are doing. You are trying to build a unifying layer above form controls.

Do you want to repeat this for textareas, number inputs, email inputs...? How many validation error messages do you plan to add? What about their i18n? And the list goes on...

Your code will be no less complex than what you are trying to replace.

Do yourself a favor, abandon that ship.

Angular 4 - Error: formControlName must be used with a parent formGroup directive

You need to pass formGroup (in your case contact_form) to child component which is ang-form

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

<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(modified)

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

Add @Input() group: FormGroup; in your ang-form.component.ts

---

Related Topics