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中，具有与模型相同长度的数组。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>

如何以模板驱动的形式创建自定义控件以正确呈现？

1 个答案: