首页 文章

formControl和ngModel

提问于
浏览 次
0
I have the following code on angular
<div *ngFor="let student of students.controls; let i=index" [formGroupName]="i" [class.active]="student.checked">
    <!-- The repeated address template -->
    <h4>Student #{{i + 1}}
        <input type="checkbox" formControlName="checked" [(ngModel)]="student.checked">
    </h4>
    <div class="form-group">
        <label class="center-block">First Name:
            <input class="form-control" formControlName="firstName">
        </label>
    </div>
    <div class="form-group">
        <label class="center-block">Last name:
        <input class="form-control" formControlName="lastName">
        </label>
    /div>
</div>

here is my css

`div.active{
  background-color:#CCFFCC !important;

}
`

在这条线上

问题是当检查checkBox时，包含复选框的数组元素的背景颜色变为绿色，但是我没有考虑formControlName“checked”，当我删除[（ngModel）] =“student.checked”时没有背景颜色更改行为，但formControlName“已检查”工作

实际行为，我使用导入的学生构建我的数组，其属性选中为true，未检查该框，但是当我检查它时，背景变为绿色

想要行为：我使用导入的学生构建我的数组，其属性选中为true，选中该框，当我取消选中它时，绿色背景消失（我的ngModel [（ngModel）] =“student.checked”与formControlName绑定“检查“）

angular binding ngmodel

2 回答

  • 0

    我找到了解决方案

    <div *ngFor="let student of students.controls; let i=index" 
[formGroupName]="i" [class.active]="student.controls.checked.value>
    <!-- The repeated address template -->
    <h4>Student #{{i + 1}}
        <input type="checkbox" formControlName="checked">
    </h4>

    这段代码有效

    谢谢您的帮助 .

    回复于
  • 0

    试试这个，使用ngClass

    <div [ngClass]="{'active':student.checked}">...</div>

    在div标签放学生，你有兴趣，改变它

    回复于

相关问题