Question

我的表单有问题。首先，我创建一个简单的表单来创建产品。这个产品是这样的：

Description:"fff"
Line_num:"4"
Quantity:545
Subtotal:3027475
Unit_price:5555
product_id:"11E826CB009A1864B430FA163EBBBC1D"
product_type_id:"11E7FC041F467AD4B09D00FF76874A55"

其次，我创建了一个formgroup addsale，其中我放置了我的产品值，并添加了另一个值。在此组件ts中，我从此代码调用product，this.products = this.ps.getProduct();此代码显示在控制台日志值中。

这是我在ts中的表格：

  this.addsale = new FormGroup({
          'invoice_number': new FormControl('', [Validators.required, Validators.nullValidator]),
          'invoice_date': new FormControl('', Validators.required),
          'client_id': new FormControl('', Validators.required),
          'amount_paid': new FormControl('', Validators.required),
          'notes': new FormControl('', Validators.required),
          'Subtotal': new FormControl('', Validators.required),
          'products': new FormArray([ ]),
          'total': new FormControl('', Validators.required),
          'contactNo': new FormControl('', Validators.required),
          'address': new FormControl('', Validators.required)
        });

在html中我使用了这段代码：

<form [formGroup]="addsale" (ngSubmit)="onaddsale()">
    <tbody formArrayName="products">
      <tr class="form-group" style="cursor: pointer" *ngFor="let item of addsale.get('products').controls; index as i">
        <td>
          <input   formControlName="Unit_price" type="number">
        </td>
        <td>
          <input   formControlName="Quantity" type="number">
        </td>
        <td>
          <input  formControlName="Description" type="text" name="Description">
        </td>
        <td>

         <input  formControlName="Subtotal" readonly type="number"> 
        </td>
        <td>
          <button type="button" class="fa" (click)="onRemoveItem(i)">x</button>
        </td>
      </tr>
    </tbody>
</form>

这段代码在consloe中显示了我所有正确的价值，但在html中并没有显示任何内容。

请帮助我，如何解决这个问题？

谢谢

Answer 1

就我在您的示例中所看到的，您没有定义FormArray。您在FormGroup中声明了该内容，但没有定义FormControls中的FormArray。

我的样子如下：

    this.customerForm = this.fb.group({
        firstName: ['', [Validators.required, Validators.minLength(3)]],
        lastName: ['', [Validators.required, Validators.maxLength(50)]],
        emailGroup: this.fb.group({
            email: ['', [Validators.required, Validators.pattern('[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+')]],
            confirmEmail: ['', Validators.required],
        }, {validator: emailMatcher}),
        phone: '',
        notification: 'email',
        rating: ['', ratingRange(1, 5)],
        sendCatalog: true,
        addresses: this.fb.array([this.buildAddress()])
    });

请注意，我正在将一个方法传递给FormArray来定义它的布局。

该方法如下所示：

buildAddress(): FormGroup {
    return this.fb.group({
            addressType: 'home',
            street1: '',
            street2: '',
            city: '',
            state: '',
            zip: ''
    });
}

然后这些 FormControl名称必须绑定到formControlName属性...而不是产品属性的名称。

您可以在此处找到以及更完整的表单示例：https://github.com/DeborahK/Angular2-ReactiveForms

我的活动表单在html中没有显示任何内容。我的价值在控制台显示

1 个答案: