formArray在一个只有一个colum要验证的tbody中

时间:2017-07-04 09:22:05

标签: angular

我很难使用formArray。我们有一个列表类:

TextBox1.Text

只应验证属性并将其绑定到输入字段。

我们设法显示只读属性(我不知道这是否是正确的方法)。

我们没有设法绑定输入字段(我发现他们不使用 ngModel 的示例,因此我避免使用它)

我们也不知道如何仅为属性添加验证。

所以这是我的问题:

  1. 如何正确绑定只读字段?
  2. 如何在没有 ngModel 的情况下绑定输入字段?
  3. 如何仅为属性创建验证?
  4. 这是我们的 HTML

    class item {
        value: number;
        name: string
        status: string
    }
    

    这就是我们绑定表单的方式:

    <div [formGroup]="parentForm">
      <div *ngIf="items">
        <table>
          <thead>
            <tr>
              <th>Name</th>
              <th>Value</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody formArrayName="itemsForm">
            <tr *ngFor="let item of parentForm.controls.itemsForm.controls; let i=index">
              <td><span>{{ item.value.name }}</span></td>
              <td>
                <input type="number" [formControlName]="i" tabindex="1" autocomplete="off" /> <!--How do I show the value here?-->
              </td>
              <td>
                <app-status [status]="item.value.status"></app-status>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    

2 个答案:

答案 0 :(得分:2)

您需要在表单数组中使用嵌套表单组。我喜欢在构造函数中注入formbuilder,在这个示例中我用fb引用它。

所以建立你的表格......

ngOnInit() {
  this.parentForm = this.fb.group({
    itemsForm: this.fb.array([])
  });
  // add below to the callback instead after you have received your data!
  this.populateForm();
}

populateForm

populateForm() {
  const control = <FormArray>this.parentForm.controls['itemsForm'];
  // the data you have received, for each object create a form group
  this.items.forEach(item => {
    control.push(this.initItems(item))
  })
}

initItems(item) {
  // create a formgroup for each item
  return this.fb.group({
    value: [item.value, Validators.required], // set required or whatever else
    name: [item.name] 
    status: [item.status]
  })
}

然后在你的视图中迭代这个formarray并显示value的输入字段,其他的可以显示为纯文本:

....
<tbody formArrayName="itemsForm">
  <tr *ngFor="let item of parentForm.controls.itemsForm.controls; let i = index" >
    <ng-container formGroupName="{{i}}">
       <td><input formControlName="value" /></td>
       <td>Name: {{item.value.name}}</td>
       <td>Status: {{item.value.status}}</td>
    </ng-container>
  </tr>
</tbody>
....

您也可能想要实际使用变量,您可以为其分配不同的表单控件&#34;路径&#34;而不是使用例如... parentForm.controls.itemsForm.controls但这只是一个建议:)

答案 1 :(得分:1)

使用FromGroupValidatorsFormBuilder来执行此操作:

myForm: FormGroup;
constructor(fb: FormBuilder) {}
ngOnInit() {
    this.myForm = this.fb.group({
        name: '', // Put the default value here
        status: '',
        value: [0, Validators.required] // Or any Validator you would use
    });
}

在您的HTML中

<form novalidate (ngSubmit)="yourSubmitFunction" [formGroup]="myForm">
    <input type="text" formControlName="value" required>
    <!-- and other inputs -->
    <!-- remember to match the validators ! (e.g. required tag for required validator) -->
</form>

编辑关于只读字段,只是不要在提交功能上发送它们