【问题标题】:ERROR Error: No value accessor for form control with name: 'products'错误错误:没有名称的表单控件的值访问器:“产品”
【发布时间】:2018-03-02 15:24:29
【问题描述】:

我的项目显示此错误:

错误错误:表单控件没有值访问器,名称为:'products'。

我想在 Myform 组件中添加一个数组 Products。

我有两个问题:

  1. 当我点击按钮注册时,我看到了这个错误。
  2. 我的产品数组在表格中是按顺序排列的,但是在注册时,这个数组是空的。我的源代码。

HTML代码:

<form [formGroup]="Myform" (ngSubmit)="onaddMyForm()">
  <div class="contant">
    <div class="input-field col s4">
      <div class="input-field col s12">
        <select formControlName="client_id" id="client_id" materialize="material_select" [materializeSelectOptions]="client">
          <option value="" disabled selected>ClientName</option>
          <option *ngFor="let item of client" [value]="item.client_id">{{item.clientName}}</option>
        </select>
      </div>
      <br>
      <div class="row">
        <div class="input-field col s12">
          <label for="total">total:</label>
          <input formControlName="total" id="total" type="text" class="validate">
        </div>
      </div>
    </div>
  </div>
  <br>
  <table formControlName="products" align="center" class="table table-bordered table-hover">
    <thead>
      <tr style="color:black;">
        <th>Price</th>
        <th>Quantita</th>
        <th>Subtotale</th>
      </tr>
    </thead>
    <tbody>
      <tr [routerLink]="i" class="group" style="cursor: pointer" *ngFor="let item of products; let i=index">
        <td>{{item.Price}}</td>
        <td>{{item.Quantita}}</td>
        <td>{{item.Subtotale}}</td>
      </tr>
    </tbody>
  </table>
  <br>
  <hr>
  <br>
  <div id="add_homebox_button_container" class="row" style="float: right;">
    <button id="add_client_button" type="submit" class="btn waves-effect waves-light">
      Register
    </button>
  </div>
</form>

我的ts代码:

我的构造函数:

     constructor(
        private router: Router,
        private fb: FormBuilder,
        private ss: ws,

      ) {
// I create the formGroup
            this.Myform = new FormGroup({
              'client_id': new FormControl('', Validators.required),
              'products': this.fb.array([]),
              'total': new FormControl('', Validators.required)
            });
            }

//My function that post in ws My form Value
              onaddMyForm() {
            this.loading = true;
            let newprod = new Product(
              this.Myform.value
            );
            console.log(newprod)// in console my array is empty

            this.ss.prodcreate(newprod).subscribe(
              result => {
                if (result === true) {
                  Materialize.toast('Prod saved successfully', 4000);
                     } else {
                  this.loading = false;
                }
              },
              error => {
                this.loading = false;
              }
            );
          }

我应该如何解决它?
图片错误

【问题讨论】:

  • 表格如何成为表单控件?
  • formControlName="products" ??
  • 如果我没记错的话,formControl 的目标是输入数据。那么如何使用表格输入数据呢?你这样做的目标是什么?你可能想看看FormControlName 指令
  • 确保报价显示为报价

标签: angular forms typescript


【解决方案1】:

好吧,我遇到了类似的问题“错误错误:没有未指定的表单控件的值访问器”

我尝试解决了 2 天,搜索了完整的 Stackoverflow,

最后什么有效,我做了什么

  • 在您的代码中查找所有 ngModel 并为其添加 name 属性。
  • 如果指定名称,则添加“ngDefaultControl”

【讨论】:

  • 谢谢!这是在殴打我。我在视图中得到了正确的响应,但控制台给出了丑陋的错误消息。添加 ngDefaultControl 消除了错误消息。
猜你喜欢
  • 1970-01-01
  • 2018-03-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-01-24
  • 2017-12-03
  • 2020-10-22
  • 2023-03-27
相关资源
最近更新 更多