angular - 根据 Angular 中的值预选元素

Question

我有动态角度反应形式。我目前面临的问题是我希望在选择产品时预先选择priceand 。loanTerm我知道在常规形式中它只是双向数据绑定，但是我如何以动态形式做到这一点。

这是我的组件代码

 this.loanProductForm = this._formBuilder.group({
      products: this._formBuilder.array([
        this.addProductFormGroup()
      ])
    });

 addProductFormGroup(): FormGroup {
    return this._formBuilder.group({
      productId: ['', Validators.required],
      price: [0, Validators.required],
      loanTermId: ['', Validators.required],
      quantity: [0, Validators.required],
      deposit: [0, Validators.required],
      total: [0, Validators.required],
    });
  }

addProductButtonClick(): void {
    (<FormArray>this.loanProductForm.get('products')).push(this.addProductFormGroup());
    console.log('Loan Products: ', this.loanProductForm.value)
  }

这是html代码

<form [formGroup]="loanProductForm">
    <table style="overflow-x: auto;display: inline-block; white-space: nowrap;">
        <thead>
            <tr class='tableHeader'>
                <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
                    <td fxFlex="22" class="pr-4">Name</td>
                    <td fxFlex="15" class="pr-4">Price</td>
                    <td fxFlex="15" class="pr-4">Loan Term</td>
                    <td fxFlex="15" class="pr-4">Quantity</td>
                    <td fxFlex="15" class="pr-4">Deposit</td>
                    <td fxFlex="15" class="pr-4">Total</td>
                </div>
            </tr>
        </thead>
        <tbody>
            <tr formArrayName="products" *ngFor="let product of loanProductForm.get('products').controls; let i = index">
                <div [formGroupName]="i" fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
                    <td fxFlex="22">
                        <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                            <mat-label>Product </mat-label>
                            <mat-select formControlName="productId" [id]="'productId' + i" required>
                                <mat-option *ngFor="let product of productList" [value]="product.productId">
                                    {{product.name}}
                                </mat-option>
                            </mat-select>

                        </mat-form-field>
                    </td>
                    <td fxFlex="15">
                        <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                            <mat-label>Price </mat-label>
                            <input type='number' (keyup)="onPriceChange($event)" matInput formControlName="price" [id]="'price' + i" name="" placeholder="Price" required>
                        </mat-form-field>
                    </td>
                    <td fxFlex="15">
                        <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                            <mat-label>Loan Term </mat-label>
                            <mat-select formControlName="loanTermId" [id]="'loanTermId' + i" required>
                                <mat-option *ngFor="let loanTerm of loanTermList" [value]="loanTerm.loanTermId">
                                    {{loanTerm.numberOfMonths}}
                                </mat-option>
                            </mat-select>
                        </mat-form-field>
                    </td>
                    <td fxFlex="15">
                        <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                            <mat-label>Quantity </mat-label>
                            <input type='number' formControlName="quantity" [id]="'quantity' + i" matInput name="" id="" placeholder="Quantity" required>

                        </mat-form-field>
                    </td>
                    <td fxFlex="15">
                        <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                            <mat-label>Deposit </mat-label>
                            <input type='number' formControlName="deposit" [id]="'deposit' + i" matInput name="" id="" placeholder="Deposit" required>
                        </mat-form-field>
                    </td>
                    <td fxFlex="15">
                        <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                            <mat-label>Total </mat-label>
                            <input disabled type='number' formControlName="total" [id]="'total' + i" matInput name="total" id="" placeholder="Total" style="color:black; font-weight:bold" required>
                            <!-- <input disabled type='number' [(ngModel)]="totalValue" ngModel [ngModelOptions]="{standalone: true}" [id]="'total' + i" matInput name="total" id="" placeholder="Total" style="color:black; font-weight:bold" required> -->
                        </mat-form-field>
                    </td>

                </div>
            </tr>
            <tr>
                <td fxFlex="10">
                    <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
                        <button type="button" mat-stroked-button class='addBtn btn-style-2' fxFlex='100' (click)='addProductButtonClick()'>Add
                            <mat-icon matSuffix>add_box</mat-icon>
                        </button>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</form>

price并且loanTerm是product对象的属性。我希望从下拉菜单中选择产品后立即自动选择它们。

标签： angularangular-reactive-formsreactive-forms

Answer 1

如果product组件中的简单字段可用，那么您可以这样做：

addProductFormGroup(): FormGroup {
    return this._formBuilder.group({
      productId: ['', Validators.required],
      price: [this.product.price, Validators.required],
      loanTermId: [this.product.loanTermId, Validators.required],
      quantity: [0, Validators.required],
      deposit: [0, Validators.required],
      total: [0, Validators.required],
    });
  }