Angular-隐藏按钮，直到满足特定条件

Question

我制作了一个反应式表单，用户可以在其中添加数据。在那里我添加了一个add按钮和一个remove按钮。单击add按钮时，用户可以添加更多的输入字段，并在单击remove时删除这些字段。现在，如果只有一个输入字段，我想隐藏remove按钮。我该怎么做？HTML代码：

<div class="row">
<div class="col">
<div class="row ml-0" style="display: flex;">
<span>Add custom questions:</span>
<mat-checkbox
style="margin-left: 10px! important;"
(change)="selectCheck()"
>
</mat-checkbox>
</div>
<div *ngIf="checked">
<span style="font-style: italic; font-size: 9px;"
>NOTE : Panel members can respond with text based answers, which will be
visible to the winner selector</span
>
<form [formGroup]="userForm">
<div
class="row"
*ngFor="let question of getQuestionFormControls(); let i = index"
>
<span class="ml-3 pt-2">Question {{ i + 1 }}</span>
<input
class="form-control ml-3 mt-1"
[formControl]="questions"
type="text"
/>
</div>
<div
class="col mt-1 justify-content-between"
style="display:flex;align-items:center;"
>
<!-- <i class="bi bi-plus-square"></i> -->
<div class="d-flex mt-1">
<mat-icon
style="color: #5663ED;cursor:pointer;margin-top: 0rem;"
(click)="addQuestion()"
>add_box</mat-icon
>
<span>Add more questions</span>
</div>
<div class="d-flex mt-1">
<mat-icon
(click)="removeQuestion(i)"
style="color: #5663ED;cursor:pointer"
>remove_circle</mat-icon
>
<span>Remove</span>
</div>
</div>
</form>
</div>
</div>
</div>

ts代码：

checked = false;
userForm: FormGroup;
constructor(private fb: FormBuilder) {
this.userForm = new FormGroup({
questions: this.fb.array([this.fb.control(null)]),
});
}
addQuestion(): void {
(this.userForm.get('questions') as FormArray).push(this.fb.control(null));
}
removeQuestion(index) {
(this.userForm.get('questions') as FormArray).removeAt(index);
}
getQuestionFormControls(): AbstractControl[] {
return (<FormArray>this.userForm.get('questions')).controls;
}
selectCheck() {
this.checked = !this.checked;
}

我尝试使用*ngif="i >= 1"，希望使用索引，但没有成功。我该怎么办？

项目的演示

Answer 1

我没有测试它，但我想它可以正常工作：

<div 
class="d-flex mt-1"
*ngIf="(this.userForm.get('questions'))?.length > 1"
>
<mat-icon
(click)="removeQuestion(i)"
style="color: #5663ED;cursor:pointer"
>remove_circle</mat-icon
>
<span>Remove</span>
</div>

如果不起作用，请尝试更改这一行：

*ngIf="(this.userForm.get('questions'))?.controls?.length > 1"