Question

我目前正在使用ngFor来生成复选框HTML。但是，当使用此方法时，我不能仅将一个特定的模板引用变量分配给另一个复选框，以便基于该复选框显示或隐藏文本区域（无论是否选中该复选框）。

我尝试通过数据数组分配模板引用变量，但是似乎不起作用。我还尝试过在页面上手动创建复选框，然后允许我添加模板引用变量，但是一旦完成，我似乎就无法从复选框取回所需的值。

<ul formArrayName="health_care_goals">
    <li  class="form-group" *ngFor="let goal of health_care_goals; let i = index" formGroupName="{{i}}">
        <input id="{{goal.id}}" type="checkbox" formControlName="{{goal.id}}">
        <label for="{{goal.id}}"><span></span>{{goal.name == 'Other' ? 'Other (Provide details here)' : goal.name}}</label>
    </li>
</ul>
<textarea *ngIf="health_care_goals_other" formControlName="health_care_goals_response_other"></textarea>

for (let i = 0; i < this.health_care_goals.length; i++) {
            let fg = new FormGroup({});
            fg.addControl(this.health_care_goals[i].id, new FormControl('', Validators.required));
            all_health_care_goals.push(fg);
}

this.goalsForm = this._formBuilder.group({
            health_care_goals: all_health_care_goals,
            health_care_goals_response_other: [''],
            medication_goal_reduce_harm: medication_goal_reduce_harm_strategies,
            reduce_harm_from_effects_of_med: [''],
            reduce_harm_from_effects_of_med_text: [''],
            reducing_harms_other: ['']
});


    private health_care_goals = [
        {name: 'Prolonging life', id: 'prolonging_life'},
        {name: 'Optimising functional independence', id: 'optimising_functional_independence'},
        {name: 'Optimising quality of life', id: 'optimising_quality_of_life'},
        {name: 'Achieving a peaceful death', id: 'achieving_a_peaceful_death'},
        {name: 'Symptom control', id: 'symptom_control'},
        {name: 'Maintaining good health and preventing illness', id: 'maintaining_good_health_and_preventing_illness'},
        {name: 'Other', id: 'other'}
    ];

我只想在选中另一个复选框时显示文本区域。

Answer 1

您必须在整个div上重复并为每个复选框指定条件

<div fxFlex *ngFor="let item of items" fxLayout="row">
   <mat-checkbox value="item.value" (change)="decideToShow(item)"></mat-checkbox>
   <textarea type="text" *ngif="item.showDesc" [(ngModel)]="item.description"></textarea>
</div>

然后在ts中定义一个函数decideToShow(item)。

decideToShow(item): void {
    if(item.value && index > 3){
        item.showDesc = true;
    } else {
        item.showDesc = false;
    }
}

Answer 2

对于正在寻找答案的任何人，此项可以帮助我达到我的要求。

https://stackoverflow.com/a/54036689/1804886

在现有formGroup中使用formGroup允许我停止使用* ngFor并单独实现复选框。然后，我可以添加模板引用变量，以处理另一个复选框的文本区域的显示和隐藏。

我也能够向每个formGroup添加验证。

使用ngfor向模板动态添加复选框时如何显示其他文本区域

2 个答案: