bootstrap-4 - Angular 6 - 如何禁用除单击按钮之外的所有按钮

Question

我已经使用 Angular 几个星期了，它开始变得有意义了，我几乎可以解决我发现的任何问题，但是我不知道从哪里开始。如果是 JQuery，那就没有问题了。

我有一个表单，每个文本框旁边都有一个编辑按钮。

当您单击编辑按钮时，它使字段可编辑并更改按钮以保存和关闭。它还会禁用所有其他编辑按钮，直到单击保存或关闭按钮。

我想要做的是有一个带有 Bootstrap 4 类的文本框，它使该字段只读，当您单击编辑按钮时，它会删除 Bootstrap 类并使其可编辑。我无法开始工作，所以我实施了另一个解决方案，即使它有效，我也不满意。

这是我的 HTML 页面，它被缩减为 2 个元素显示，但还有更多

<form [formGroup]="editForm">
    <div class="form-group row" *ngIf="!developerNameEdit">
        <label class="col-sm-4 col-form-label font-weight-bold">Developer Name</label>
        <div class="col-sm-6">
            {{ developer.developerName }}<button (click)="editDeveloperName()" [disabled]="disabled" class="btn btn-sm btn-link" type="button"><i class="fa fa-pencil"></i></button> 
        </div>
    </div>
    <div class="form-group row" *ngIf="developerNameEdit">
        <label for="developerName" class="col-sm-4 col-form-label font-weight-bold">Developer Name</label>
        <div class="col-sm-6">
            <div class="input-group mb-3">
                <input type="text" formControlName="developerName" name="developerName" class="form-control" id="developerName">
                <div class="input-group-append">
                    <button (click)="saveDeveloperName()" class="btn btn-success" type="button"><i class="fa fa-check"></i></button> 
                    <button (click)="closeDeveloperName()" class="btn btn-default" type="button"><i class="fa fa-times"></i></button> 
                </div>
            </div>
        </div>
    </div>
    <div class="form-group row" *ngIf="!receptionPhoneEdit">
        <label class="col-sm-4 col-form-label font-weight-bold">Reception Phone</label>
        <div class="col-sm-6">
            {{ developer.receptionPhone }}<button (click)="editReceptionPhone()" [disabled]="disabled" class="btn btn-sm btn-link" type="button"><i class="fa fa-pencil"></i></button> 
        </div>
    </div>
    <div class="form-group row" *ngIf="receptionPhoneEdit">
        <label for="receptionPhone" class="col-sm-4 col-form-label font-weight-bold">Reception Phone</label>
        <div class="col-sm-6">
            <div class="input-group mb-3">
                <input type="text" formControlName="receptionPhone" name="receptionPhone" class="form-control" id="receptionPhone">
                <div class="input-group-append">
                    <button (click)="saveReceptionPhone()" class="btn btn-success" type="button"><i class="fa fa-check"></i></button> 
                    <button (click)="closeReceptionPhone()" class="btn btn-default" type="button"><i class="fa fa-times"></i></button> 
                </div>
            </div>
        </div>
    </div>
  </form>

这是我的组件（精简以显示重要信息）

export class DeveloperDetailComponent implements OnInit {

    developer: Developer;
  editForm: FormGroup;
  disabled: boolean = false;

  developerNameEditBtn: boolean = false;
  receptionPhoneEditBtn: boolean = false;
  // more of these for other formelements

  developerNameEdit: boolean = false;
  receptionPhoneEdit: boolean = false;
  // more of these for other formelements

  constructor() {} //other stuff in here

  ngOnInit() {}//other stuff in here

  editDeveloperName() {
    this.developerNameEdit = true;
    this.disabled = true;
  }

  saveDeveloperName() {
    this.disabled = false;
  }

  closeDeveloperName() {
    this.developerNameEdit = false;
    this.disabled = false;
  }

  editReceptionPhone() {
    this.receptionPhoneEdit = true;
    this.disabled = true;
  }

  saveReceptionPhone() {
    this.disabled = false;
  }

  closeReceptionPhone() {
    this.receptionPhoneEdit = false;
    this.disabled = false;
  }
}

我发现我需要 3 个功能。

1. 编辑
2. 节省
3. 关

我考虑过以某种方式将输入元素传递给函数，并在这些函数中处理禁用其他元素等。

有没有人有关于如何做到这一点的建议？也许链接到执行类似操作的示例。经过一些研究，我考虑过使用指令，但不知道从哪里开始。

标签： bootstrap-4angular6angular-forms