Angular 4:是否以某种形式用输入类型的颜色渲染不同 [英] Angular 4 : rendering different with input type color in a form or not

问题描述

我正在开发使用JHipster和Angular 4.3构建的应用程序.我在以角度形式使用输入类型的颜色时遇到问题.我需要一个颜色选择器来更改颜色属性.首先，我只显示了一个列表(ctrlColors)和一个颜色选择器的值，没关系.但是用户需要自定义颜色，因此我制作了一个表格. 现在，当我加载页面时，我并没有显示所有颜色，只有列表的最后一个(下面的屏幕)

I'm working on an app built with JHipster and Angular 4.3. I've a problem with the use of input type color in an angular form. I need a color picker to change a color attribute. First I just displayed values of a list (ctrlColors) and a color picker, it was OK. But the users need to customize the colors, so I made a form. Now when I load my page, I don't have all the colors displayed, but only the last of the list (screen below)

我遵循了这个简单的示例:带有Angular的输入类型颜色示例 然后，我使用Angular.io文档和此建立了表单.

I've followed this simple example : input type color example with Angular And I built my form with Angular.io documentation and this.

我有一个像这样的ControlColor.model.ts模型:

I've a model ControlColor.model.ts like this :

export class ControlColor implements BaseEntity {
    constructor(
        public id?: number,
        public color?: string,
        public control?: Control,
    ) {
    }
}

在其他组件中，我在MyComponent.html中有此内容:

In an other component I have this in MyComponent.html :

<form #ctrlColorForm="ngForm" (ngSubmit)="submitColors(ctrlColorForm.form);">
    <table>
        <tr *ngFor="let ctrl of ctrlColors">
            <td>{{ctrl.control}} :</td>
            <td>
                <input type="color"
                       [(ngModel)]="ctrl.color"
                       #nameField="ngModel"
                       name="color"
                       (ngValue)="ctrl.color"
                style="color-rendering: {{ctrl.color}}"/>
            </td>
            <td>{{ctrl.color}}</td>
        </tr>
    </table>
    <button type="submit" class="btn btn-sm">
        <span class="fa fa-pencil"></span>
        <span class="d-none d-md-inline" jhiTranslate="entity.action.edit">Edit</span>
    </button>
</form>

奇怪的是，当我删除<form> balise时，渲染正常(我从服务器发送了正确的颜色，可以编辑颜色)，但是当我放置balise表单时，我有了这个:

The strange part is that when I remove the <form> balise, the rendering is Ok (I have the right colors sent from my server and I can edit the colors), but when I put the form balise, I have this :

我有正确的RGB代码(显示在右边). 有人有主意吗?

I have the right RGB codes (displayed on the right). Does anybody have an idea ?

推荐答案

问题是由所有输入元素具有相同的名称(name="color")引起的.根据 Angular文档:

The problem is caused by the fact that all input elements have the same name (name="color"). According to Angular documentation:

在<form>标记内使用ngModel时，您还需要提供 名称属性，以便可以向父级注册控件 名称下的表格.

When using the ngModel within <form> tags, you'll also need to supply a name attribute so that the control can be registered with the parent form under that name.

如果使输入控件名称不同，则颜色将正确显示在每个控件中，如 此堆叠闪电战 :

If you make the input control names different, the color will be displayed correctly in each one, as shown in this stackblitz:

<tr *ngFor="let ctrl of ctrlColors; let i=index">
    ...
    <td>
        <input type="color" [(ngModel)]="ctrl.color" name="color_{{i}}" ... />
    </td>
    ...
</tr>

这篇关于Angular 4:是否以某种形式用输入类型的颜色渲染不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！