我有一个角度组件“表单字段”，它根据生成表单的输入类型迭代输入类型数组。我的问题是当我尝试将该组件插入到我的表单中时，如下所示
<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
表单返回一个值
{“把钱拿出来”}
但是，将输入放在我的“表单字段”组件中不会返回数据。
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" />