Question

您好我的表单上出现以下错误

<form [formGroup]='billTypesForm' (ngSubmit)="submitForm(billTypesForm.value)">

    <table>
      <thead>
      <tr>
        <th>name</th>
        <th>percentage</th>
        <th>out of scope</th>
        <th>Edit</th>
      </tr>
      </thead>
      <tbody>

      <tr *ngFor='let billType of billTypes; let i = index'>

        <input type="hidden" name="id" [(ngModel)]="billType.id" [formControl]="billTypesForm.controls['id']" />

        <td class="name">
          <div class="input-field">
            <input type="text" name="name" placeholder="Name" [(ngModel)]="billType.name" [formControl]="billTypesForm.controls['name']" />
          </div>
        </td>

        <td class="percentage">
          <div class="input-field">
            <input type="text" name="percentage"  [(ngModel)]="billType.percentage" readonly placeholder="Tax" [formControl]="billTypesForm.controls['percentage']" />
          </div>
        </td>
        <td class="outOfScope">
          <input type="checkbox" name="outOfScope"  [(ngModel)]="billType.outOfScope"  [formControl]="billTypesForm.controls['outOfScope']" />
        </td>

        <input type="hidden" name="active" [(ngModel)]="billType.active"  [formControl]="billTypesForm.controls['active']" />

        <td class="edit" onclick="deleteBillTypeRow($(this));">
          <i class="material-icons">mode_edit</i>
        </td>

      </tr>
      </tbody>
    </table>
  </form>

这是我的html表单

    import {Component, OnInit, AfterViewInit, AfterContentChecked, Input} from '@angular/core';

import {FormBuilder, FormGroup} from '@angular/forms'
import {BillTypesDataService} from './bill-types-data.service'
import {BillTypes} from "./bill-types";

@Component({
  selector: 'brightbook-bill-types',
  templateUrl: './bill-types.component.html',
  styleUrls: ['./bill-types.component.css'],
})
export class BillTypesComponent implements OnInit {

  billTypesForm : FormGroup;
  public billTypes: BillTypes;

  constructor(private billTypesService: BillTypesDataService, fb: FormBuilder) {
    this.billTypesForm = fb.group({
        'id':[''],
        'name':[''],
        'percentage':[''],
        'outOfScope':[''],
        'active':['']

    });
  }

  ngOnInit() {
    this.billTypesService.getBillTypes()
    .subscribe(
      (res:BillTypes) => this.billTypes = res,
      error =>  console.log( <any>error)
    );
  }

问题似乎在输入文本框中的[（ngModel）] =“billType.name”

这是我的组件

import { Injectable } from '@angular/core';
import {Http, Response, Request, RequestMethod} from '@angular/http';
import {BillTypes} from './bill-types'

import {Observable} from "rxjs";

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class BillTypesDataService {

  private billTypesUrl = '/settings/bill-types/json';

  billTypes: BillTypes[] = [];

  constructor(public http: Http) {
  }

  getBillTypes() {
    return this.http.get(this.billTypesUrl)
      .map(res => <BillTypes[]> res.json())
      .catch(this.handleError);
  }

  private handleError (error: Response) {
    return Observable.throw('Internal server error');
  }

}

这是我的服务

[
  {
    "id": null,
    "name": "Advertising",
    "percentage": 0.5,
    "outOfScope": false,
    "active": true,
    "created": null
  },
  {
    "id": null,
    "name": "Car & Truck Expenses",
    "percentage": 1,
    "outOfScope": false,
    "active": true,
    "created": null
  },
  {
    "id": null,
    "name": "Contractors",
    "percentage": 0,
    "outOfScope": false,
    "active": true,
    "created": null
  }
]

这是我从终点呼叫回来的json

export class BillTypes {
  constructor(
  public id:string,
  public name:string,
  public percentage:number,
  public outOfScope:boolean,
  public active:boolean,
  public dateCreate:string,
  ){}
}

我有一个看起来像这样的模型类

cur.execute('''
SELECT * FROM Table1 WHERE ColA = ? 
UNION
SELECT * FROM Table1 WHERE ColB = ? 
UNION
SELECT * FROM Table1 WHERE ColC = ?
(ValueA, ValueB, ValueC,)''')

如果有人可以提供帮助，那么非常感谢提前感谢。

Answer 1

我认为，你的表格变得疯狂。您为每个字段this.billTypesForm = fb.group({})创建了1个实例，然后为每一行使用相同的字段。尝试为每一行创建新的formGroup ...

更新

@Component({
    selector: 'brightbook-bill-types',
    templateUrl: './bill-types.component.html',
    styleUrls: ['./bill-types.component.css'],
})
export class BillTypesComponent implements OnInit {

    public billTypes: BillTypes;

    constructor(private billTypesService: BillTypesDataService){}

    ngOnInit() {
        this.billTypesService.getBillTypes()
        .subscribe(
             (res:BillTypes) => this.billTypes = res,
             error =>  console.log( <any>error)
        );
    }
}

@Component({
    selector: 'brightbook-bill-item',
    templateUrl: './bill-item.component.html'
})
export class BrItem{

    billTypesForm : FormGroup;

    @Input()billType: BillType;

    constructor(fb: FormBuilder){
        this.billTypesForm = fb.group({
            'id':[''],
            'name':[''],
            'percentage':[''],
            'outOfScope':[''],
            'active':['']
        });
    }
}

帐单item.component.html

<tr>
<form [formGroup]='billTypesForm' (ngSubmit)="submitForm(billTypesForm.value)">
    <input type="hidden" name="id" [(ngModel)]="billType.id" [formControl]="billTypesForm.controls['id']" />

        <td class="name">
           <div class="input-field">
             <input type="text" name="name" placeholder="Name" [(ngModel)]="billType.name" [formControl]="billTypesForm.controls['name']" />
          </div>
        </td>

        <td class="percentage">
           <div class="input-field">
             <input type="text" name="percentage"  [(ngModel)]="billType.percentage" readonly placeholder="Tax" [formControl]="billTypesForm.controls['percentage']" />
          </div>
        </td>
    ...
</form>
</tr>

帐单types.component.html

<table>
  <thead>
  <tr>
    <th>name</th>
    <th>percentage</th>
    <th>out of scope</th>
    <th>Edit</th>
  </tr>
  </thead>
  <tbody>
     <bill-item [billType]="billType" *ngFor='let billType of billTypes;'></bill-item>
  </tbody>
</table>

Twoway数据绑定表单异常

1 个答案: