Question

我正在处理动态表单，其中的行是根据用户要求生成的。但是问题是，用户一旦生成新行，它就会自动变为无效，甚至不动它。如何避免这种行为。这是我的表格

当我单击添加按钮时，它就是这样

这是我的html文件

<form [formGroup]="loanProductForm">
    <table>
        <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>
                            <div *ngIf="product.get('productId').errors?.required &&
                                                    product.get('productId').touched">
                                ProductId is required
                            </div>
                        </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' 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 type='number' formControlName="total" [id]="'total' + i" matInput name="" id="" placeholder="Total" required>
                        </mat-form-field>
                    </td>

                </div>
            </tr>
            <tr>
                <td fxFlex="10">
                    <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
                        <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>
<button mat-raised-button fxFlex="15" class="btn-style-1" style="align-self: flex-end;margin-right: 30px;margin-top: 15px;" (click)="addNewLoan()">Save</button>
</form>

这是我的ts文件中的相关代码段

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

addProductFormGroup(): FormGroup {
    return this._formBuilder.group({
      productId: ['', Validators.required],
      price: ['', Validators.required],
      loanTermId: ['', Validators.required],
      quantity: ['', Validators.required],
      deposit: ['', {Validators.required,updateOn: 'blur'}],
      total: ['', Validators.required],
    });
  }
  addProductButtonClick(): void {
    (<FormArray>this.loanProductForm.get('products')).push(this.addProductFormGroup());
    console.log('Loan Products: ', this.loanProductForm.value)
  }

即使我在html中使用*ngIf，但仍会使新元素无效。

预先感谢

Answer 1

我们需要记住的是，如果我们不将角形内的按钮指定为button类型，则angular将假定按钮的类型为submit。因此，这实际上就是您的代码中正在发生的事情，您的表单实际上已提交。提交表单时，默认的棱角材质表单会将所有内容都涂成红色到无效字段。

所以只需添加

type="button"

转到您的Add按钮：

<button type="button" .... (click)='addProductButtonClick()'>
  Add
</button>

STACKBLITZ

Answer 2

您可以在* ng-if中尝试product.controls['productId'].invalid。

Answer 3

您可以尝试将addProductButtonClick（）函数编辑为此：

addProductButtonClick(): void {
    (<FormArray>this.loanProductForm.get('products')).push(newGroup);
    const indexOfLastProduct = this.loanProductForm['controls']['products'].length - 1;
    this.loanProductForm['controls']['products']['controls'][indexOfLastProduct].markAsUntouched();

    console.log('Loan Products: ', this.loanProductForm.value)
  }

动态添加反应形式元素使它们在Angular中自动无效

3 个答案: