Question

我有一个用于创建和编辑屏幕的表单组。创建页面按预期工作。但是在Edit page文本框和下拉列表中应预先填充值。在我的情况下，使用下面的代码，我可以为文本框填充值，但不能为下拉列表填充值。这是我的代码：

create.ts - >
//this is for group
createBindingForm = new FormGroup({
    bindingId: new FormControl('',[Validators.required]),
    bindingType: new FormControl('',[Validators.required]),
  });


//Method to pre-populate value while click on edit.

preFillForm(binding: Binding) {
    this.createBindingForm.value.bindingId = binding.businessObject.id; // this is working fine.
    this.createBindingForm.controls['bindingType'].setValue(binding.businessObject.type.value,{onlySelf: true}); // Not working
}

Create.html->

<form [formGroup]="createBindingForm" class="form">
<div class="form-input-row">
      <section class="form-input-item">
        <label class="input-label" [class.error]="bindingId.errors && (bindingId.dirty || bindingId.touched || formSubmitAttempt)" >
          Business Id <span class="red">*</span>
        </label>
      <label class="input-label">
         <input type="text" formControlName="bindingId" [class.error]="bindingId.errors && (bindingType.dirty || bindingType.touched || formSubmitAttempt)" [disabled]="isUpdating" required autocomplete="off">
      </label>
        <div *ngIf="bindingId.errors && (bindingId.dirty || bindingId.touched || formSubmitAttempt)" class="alert alert-danger">
          <div class="error-message" [hidden]="!bindingId.errors.required">
            Please provide a business Id
          </div>
        </div>
      </section>
      <span class="row-item-spacer"></span>
      <section class="form-input-item">
        <label class="input-label" [class.error]="bindingType.errors && (bindingType.dirty || bindingType.touched || formSubmitAttempt)">
          Binding Type <span class="red">*</span>
        </label>
      <label class="input-label">
        <select class="custom-select" formControlName="bindingType" class="drop-down" [class.error]="bindingType.errors && (bindingType.dirty || bindingType.touched || formSubmitAttempt)" [disabled]="isUpdating" required>
          <option value="" disabled>Select</option>
          <option *ngFor="let bindingtype of bindingtype" [ngValue]="bindingtype">{{bindingtype.value}}</option>
        </select>
      </label>
        <div *ngIf="bindingType.errors && (bindingType.dirty || bindingType.touched || formSubmitAttempt)" class="alert alert-danger">
          <div class="error-message" [hidden]="!bindingType.errors.required">
            Please select the binding type
          </div>
        </div>
      </section>
    </div>
</form>

型号：

businessObject: {
    id: string;
    type: {
      label: string;
      value: string;
    }
  };

有人可以帮忙下拉菜单吗？

Answer 1

尝试这样：

preFillForm(binding: Binding) {
    this.createBindingForm.controls[bindingId].patchValue(binding.businessObject.id);
    this.createBindingForm.controls[bindingType].patchValue(binding.businessObject.type.value);
}

无法在下拉菜单中预先填充角度反应形式的值

1 个答案: