如何将ngForm附加到组件？

Question

我有一个角度组件“表单字段”，它通过基于输入类型的数组迭代输入类型，它生成一个表单。 我的问题是，当我试图插入我的形式内部的组件，如下

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

我想一个ngForm附加到表单字段，这样，当我回到我form.value可以接收所产生的价值从形式领域。我该怎么做呢？

把

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

形式返回一个值

{ “SHOWME”： “themoney”}

然而把输入内我的 “形式字段” 组件不会返回数据。

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> 

该计划是把ngForm通入该列表，以能够传回每个输入字段的值。

更新： 之前实施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); 
} 
} 

实施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); 
} 
} 

在它最简单的形式之后

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

个

作品和下面的不

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

formFields.component.html

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

Answer 1

所有你需要补充的是name='{{formField.field}}'窗体标记内：

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