Question

我有以下模板

<template #myTemplate >
  <input type="text" class="input-sm" required />    
</template>

我将此模板引用到formGroup，就像这样

<div [formGroup]="testForm">
  <div [ngTemplateOutlet]="myTemplate" [ngOutletContext]="{item: item}">
</div>

此模板#myTemplate由组件的最终用户提供。

这里的问题是，它没有被formGroup识别，因此无法验证。在谷歌搜索我发现我们需要使用NG_VALUE_ACCESSOR注册此控件。所以在输入元素中添加了一个属性指令。

@Directive({ 
selector: '[control]',
providers: [
{ 
  provide: NG_VALUE_ACCESSOR, multi: true, 
  useExisting: forwardRef(() => TempControl),
}],
host: {'(change)': 'onChange($event.target.value)', '(blur)':
'onTouched()'},
})
export class TempControl implements ControlValueAccessor{
  onChange = (_) => {};
  onTouched = () => {} 
  constructor(private renderer: Renderer2, private elem: ElementRef) {
  }
  writeValue(value) : void {
    this.renderer.setProperty(this.elem.nativeElement, 'value', value);
  } 
  registerOnChange(fn: (_: any) => void): void {
    this.onChange = fn;
  }
  registerOnTouched(fn){ this.onTouched = fn; }
}

我已将此指令添加到input元素，如下面的

<template #myTemplate >
  <input type="text" class="input-sm" control required />    
</template>

但即使在使用NG_VALUE_ACCESSOR注册并实施ControlValueAccessor后，表单组也无法识别该元素。

我知道templateref没有在formGroup中移动，只有一个引用可用，因此formGroup无法检测输入。在这种情况下，什么是正确的解决方案？

我引用了这个SO answer，只是实现ControlValueAccessor是否使封闭的formGroup知道这个新输入？执行此操作后，我检查了没有此新输入的FormGroup.controls。

我已在此stackblitz

中复制了此问题

Angular2 - 如何通过FormGroup识别的ngTemplateOutlet添加输入？

0 个答案: