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个功能。

编辑
保存
关闭

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

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

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

0 个答案: