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" 希望能用到索引，但是没有用。我该怎么办？

project

的演示

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"

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

Angular- Hide button till certain conditions are met

angular-ng-if

angular

angular-reactive-forms

angular10