Question

当我在表单中添加一个产品时，显示此错误。我的代码ts：

this.products = this.ps.getProduct();

this.addform = this.fb.group({
  'invoice_number': new FormControl('', [Validators.required, Validators.nullValidator]),
  'Subtotal': new FormControl('', Validators.required),
  'products': this.fb.array([
  ]),
  'total': new FormControl('', Validators.required),
});

模特课：

export class Sale {
    invoice_number: number;
    products: Products[];
}

我的HTML代码：

    <form [formGroup]="addform" (ngSubmit)="onaddsale()">
      <div class="contant">
        <div class="row">
          <div class="input-field col s4">
           <input formControlName="invoice_number" id="invoice_number" type="text" class="validate">
          </div>
    </div>
    </div>
          <tr formArrayName="products" class="group" style="cursor: pointer" *ngFor="let item of products; index as i" [formGroupName]="i">
            <td>
              <input formControlName="Subtotal" [(ngModel)]="item.Subtotal" readonly type="number" />
            </td>
            <td>
              <input formControlName="total" [(ngModel)]="item.total" readonly type="number" />
            </td>          
          </tr>
</form>

在我的HTML中没有显示任何内容，也在控制台中显示我的错误。

你能说明问题是什么，如何解决这个问题？

Answer 1

尝试添加formGroupName，如：

<form [formGroup]="addform" (ngSubmit)="onaddsale()">
          <div class="contant">
            <div class="row">
              <div class="input-field col s4">
               <input formControlName="invoice_number" id="invoice_number" type="text" class="validate">
              </div>
        </div>
        </div>
              <tr formArrayName="products" class="group" style="cursor: pointer *ngFor="let item of products; index as i">
             <div [formGroupName]="i">
                <td>
                  <input formControlName="subtotal" readonly type="number" />
                </td>
                <td>
                  <input formControlName="total"  readonly type="number" />
                </td>          
              </tr>
           </div>
</form>

Answer 2

更慢我认为你有一个服务ps有一个方法getProducts（）有点像

getProduct(id:any)
{
     return this.httpClient.get("url/"+id);
}

url / Id会给你一个json，例如

'invoice_number':222152
'product':[
   {item:'some',total:120,subtotal:130},
   {item:'other',total:110,subtotal:140}
]

那么，您必须在服务中订阅ngOnInit，并在获取数据时创建一个formGroup

ngOnInit()
{
    this.ps.getProduct('123').subscribe((data:any)=>{
        this.createform(data)
    }
}
//see that createForm is a function that return a formGroup
//this formGorup have two fields, "invoice_number" and "products"
 //products is an array. We use a function that return a array 
 //of controls and "products" is thif.fb.array(the array of controls)
createForm(data:any)
{
      return this.fb.group({
           invoice_number:[data? data.invoice_number:null,
                   [Validators.required, Validators.nullValidator]],
           products:this.fb.array(this.getProducts(data? data.products:null)
      })
}
//getProducts return an array of Controls -really an array of group controls-
getProducts(products:any)
{
   let controls[]=[];
   if (products)
   {
      products.forEach(x=>{
         controls.push(
             this.fb.group({
                  total:[x.total,Validators.required]
                  subtotal:[x.total,Validators.required]

             }
         );
      }
   }
   return controls;
}

然后你的html就像

<form [formGroup]="addform" (ngSubmit)="onaddsale()">
      <div class="contant">
        <div class="row">
          <div class="input-field col s4">
           <input formControlName="invoice_number" id="invoice_number" type="text" class="validate">
          </div>
    </div>
    </div>
          <tr formArrayName="products" class="group" style="cursor: pointer" *ngFor="let item of products; index as i" [formGroupName]="i">
            <td>
              <input formControlName="subtotal" readonly type="number" />
            </td>
            <td>
              <input formControlName="total"  readonly type="number" />
            </td>          
          </tr>
</form>

看到你可以使用this.addForm = this.createForm（）并且Form有空值。 NOTA：我使用＆＃34;小计＆＃34; （不是＆＃34;小计＆＃34;）选择使用小写或CamelCase来命名变量

错误错误：找不到路径控制：'产品 - ＆gt;数量'

2 个答案: