如何將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>