如何以模板驱动的形式创建自定义控件以正确渲染

Question

问题：我可以拥有绑定的ngModel的自定义控制渲染值，或者我可以按预期具有验证"泡泡"。

我的自定义文本组件具有所需的属性，该属性在该层上受到尊重，但父母对此不知道，除非我使用ViewProvider。但是，当使用ViewProvider时，我没有任何渲染。

我创建了一个带有我的意思的示例的stackblitz。请找到custom-text组件，然后在ViewProvider评论和未评论的情况下尝试表格。

https://stackblitz.com/edit/angular-fail-to-render

我喜欢了解我在做错了什么以及如何在形式和自定义控制之间实现这种交流。

Answer 1

来自此响应添加提供的提供：ng_validators，删除必需并添加palidatiton函数，例如

public setDisabledState?(isDisabled: boolean): void { }
validate(control:any){
    return this.model?null:{required:true}
  }

您的分叉stackblitz

更新当我们使用[（ngmodel）]使用字符串（或数字数组）的数组时，存在问题。

这不起作用

  {{model.loopValues|json}}
  //NOT WORK
  <div *ngFor="let n of model.loopValues; let i = index;">
    <input [(ngModel)]="n" 
        name="{{'ct'+i}}" #control="ngModel"></custom-text>
  </div>

并且不起作用，因为ngmodel在时间上变量" n"上结合。如果型号。循环值是对象的数组，因为该对象的"内存位置"绑定。

我们可以考虑这个

  //NOT WORK
  <div *ngFor="let n of model.loopValues; let i = index;">
    <input [(ngModel)]="model.loopValues[i]" 
          name="{{'ct'+i}}" #control="ngModel"></custom-text>
  </div>

并且不起作用，因为当我们更改输入时，失去了焦点，因为Angular再次渲染 *ngfor

我的想法在.ts中具有与模型相同长度的数组。

  array=new Array(this.model.loopValues.length)

现在我们可以做

<div *ngFor="let n of array; let i = index;">
    <custom-text [(ngModel)]="model.loopValues[i]" 
      name="{{'ct'+i}}" #control="ngModel"></custom-text>
</div>

奖金：我们可以使用重复指令并写一些

<div *repeat="model.loopValues.length;let i">
    <custom-text [(ngModel)]="model.loopValues[i]" 
      name="{{'ct'+i}}" #control="ngModel"></custom-text>
</div>