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