How to attach an ngForm to a component?

Question

I have an angular component "form-fields" that iterates through an array of input types based off those input types it generates a form. My problem is when I am trying to insert that component inside my form as follows

<form #form="ngForm" autocomplete="off" novalidate>
    <form-fields (execFormFieldFunc)="execFormFieldFunc($event)"
         [formFieldTypes]="templateSelectionItems.formFieldTypes"
         [formFields]="templateSelectionItems.formFields">
    </form-fields>
    <button class="btn btn-primary" type="button" 
         (click)="templateSelectionFunc(form.value, templateSelectionItems.saveFunc)">
      Save
    </button> 
</form>

I am wanting to attach an ngForm to the form-fields so that when I return form.value I can receive the values generated from the form-fields. How do I do this?

Putting

<input type="text" id="showme" name="showme" ngModel="themoney" /> inside

the form returns a value

{"showme":"themoney"}

However putting the input inside my "form-fields" component doesn't return the data.

formFields.component.html

<div *ngFor="let formField of templateSelectionItems.formFields">
    <div class="container-fluid col-md-12 col-xs-12">
    <div class="row" *ngIf="templateSelectionItems.formFieldTypes[formField.type] !='hidden'">           
    <div class="col-md-3 col-xs-12 space-below">{{formField?.title}}</div>
    <div class="col-md-3 col-xs-12 space-below">
    <span *ngIf="templateSelectionItems.formFieldTypes[formField.type] =='view'">{{formField?.value}}</span>
    <input *ngIf="templateSelectionItems.formFieldTypes[formField.type]=='number'" type="number" class="form-control" placeholder="{{formField?.placeholder}}">
   <input *ngIf="templateSelectionItems.formFieldTypes[formField.type]=='bool'" type="checkbox" class="form-control" checked="{{formField.value}}">                 
   </div>            
   </div>
   <input *ngIf="templateSelectionItems.formFieldTypes[formField.type] == 'view' || templateSelectionItems.formFieldTypes[formField.type] == 'hidden'" type="hidden" name="{{formField.field}}"  ngModel="{{formField.value}}">
  </div> 
</div>

The plan is to pass the ngForm into the list to be able to pass back the values of each input field.

Update: Before implementing ControlValueAccessor

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { IFormField } from '../common/index'
import { FormFieldType } from './formFieldTypes.enum';

@Component({
    selector: 'form-fields',
    templateUrl: './formFields.component.html' 
})

export class FormFieldsComponent implements OnInit  {           

@Input() formFields: IFormField[];
@Input() formFieldTypes: FormFieldType[];                                            
@Output() execFormFieldFunc = new EventEmitter();   

 ngOnInit(): void {

 }

 formFieldFunc(data, funcType){         
     var nData = <any>{};
     nData.value = data;
     nData.funcType = funcType;
     this.execFormFieldFunc.emit(nData);
 } 
}

After implementing ControlValueAccessor

import { Component, OnInit, Input, Output, EventEmitter, forwardRef  } from '@angular/core';
import { IFormField } from '../common/index'
import { FormFieldType } from './formFieldTypes.enum';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';

export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => FormFieldsComponent),
multi: true
};

@Component({
selector: 'form-fields',
templateUrl: './formFields.component.html',
providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR] 
})

export class FormFieldsComponent implements ControlValueAccessor  {           
writeValue(obj: any): void {
    throw new Error("Method not implemented.");
}
registerOnChange(fn: any): void {
    throw new Error("Method not implemented.");
}
registerOnTouched(fn: any): void {
    throw new Error("Method not implemented.");
}
setDisabledState(isDisabled: boolean): void {
    throw new Error("Method not implemented.");
}

@Input() formFields: IFormField[];
@Input() formFieldTypes: FormFieldType[];                                            
@Output() execFormFieldFunc = new EventEmitter();   

 formFieldFunc(data, funcType){         
     var nData = <any>{};
     nData.value = data;
     nData.funcType = funcType;
     this.execFormFieldFunc.emit(nData);
 }  
}

In it's simplest form

<form #formFields="ngForm">
<input type="text" name="text" ngModel="test" />
</form>

works and the below does not

<form #formFields="ngForm">
<form-fields (execFormFieldFunc)="execFormFieldFunc($event)" [formFields]="twoSelects.formFields"></form-fields>
</form>

formFields.component.html

<input type="text" name="text" ngModel="test" />

@yurzui I am receiving this error If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions. — Demodave
Did you implement ControlValueAccessor? Then add ngModel and name to your component — yurzui

Vivek Doshi Vivek Doshi · Accepted Answer · 2017-06-20T17:21:54

All you need to add is name='{{formField.field}}' inside form tag:

<div *ngFor="let formField of formFields">
    <div class="container-fluid col-md-12 col-xs-12">
    <div class="row" *ngIf="formFieldTypes[formField.type] !='hidden'">           
        <div class="col-md-3 col-xs-12 space-below">{{formField?.title}}</div>
        <div class="col-md-3 col-xs-12 space-below">
            <span *ngIf="formFieldTypes[formField.type] =='view'">{{formField?.value}}</span>
            <input *ngIf="formFieldTypes[formField.type]=='number'" type="number" class="form-control" placeholder="{{formField?.placeholder}}" name='{{formField.field}}'>
            <input *ngIf="formFieldTypes[formField.type]=='bool'" type="checkbox" class="form-control" checked="{{formField.value}}"  ngModel="formField.field" name='{{formField.field}}'>                 
        </div>            
    </div>
    <input *ngIf="formFieldTypes[formField.type] == 'view' || formFieldTypes[formField.type] == 'hidden'"  ngModel="formField.field" type="hidden" name='{{formField.field}}'>
    </div>                       
</div>

How to attach an ngForm to a component?

1 Answers