错误错误:没有名称形式的表单控件的值访问器:' products'

时间:2018-03-02 15:24:30

标签: angular forms typescript

我的项目显示此错误:

  

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

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

我有两个问题:

  1. 当我点击按钮注册时,我看到了这个错误。
  2. 我的产品数组在表中按顺序排列,但在Register时,此数组为空。我的源代码。
  3. 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>
    

    我的代码:

    我的构造函数:

         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;
                  }
                );
              }
    

    我该如何解决? 我错了

    enter image description here

1 个答案:

答案 0 :(得分:3)

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

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

最后起作用了,我做了什么

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