如何在模板驱动的表单中创建自定义控件以正确呈现？

Question

问题：我可以让自定义控件呈现绑定ngModel 的值，或者我可以让验证按预期“冒泡”。

我的自定义文本组件有一个必需的属性，该属性在该层上受到尊重，但除非我使用 viewProvider，否则父级不知道它。但是当使用 viewProvider 时，我没有任何渲染。

我创建了一个堆栈闪电战，其中包含一个运行示例来说明我的意思。 请找到 custom-text 组件并尝试使用 viewProvider 已评论和未评论的表单。

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

我很想了解我做错了什么以及如何在表单和自定义控件之间实现这种通信。

Answer 1

从this response添加提供：NG_VALIDATORS，删除所需并添加验证功能，如

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

your forked 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”上，所以不起作用。如果 model.loopValues 是一个对象数组，那么这项工作是因为绑定了对象的“内存位置”。

我们可以考虑一下

  //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中有一个与model.loopValues长度相同的数组

  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>

奖励：我们可以使用repeat directive 并写一些喜欢

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