一个只有一个列的tbody中的formArray待验证 [英] formArray in a tbody with only one colum to be validated

问题描述

我在使用 formArray 时遇到了麻烦.我们有一个课程的列表:

I'm having a hard time using formArray. We have a list of a class:

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

仅属性 value 应当经过验证并绑定到输入字段.

Only the property value should be validated and is bounded to an input field.

我们设法显示了只读属性(我不知道这是否是执行此操作的正确方法).

We managed to display the readonly properties (I don't know if this is the correct way to do this tho).

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

We didn't manage to bind the input field (the samples I found they don't use ngModel, so I'm avoiding it)

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

We also don't know how to add the validation only for the value property.

这是我的问题:

1. 如何正确绑定只读字段?
2. 如何在没有 ngModel 的情况下绑定输入字段?
3. 如何仅对 value 属性创建验证?

1. How to bind properly the readonly fields?
2. How to bind the input field without ngModel?
3. How to create validation for the value property only?

这是我们的 HTML :

<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>

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

That is how we bind our form:

public ngOnInit(): void {

    let controls = new Array<FormControl>();

    this.items.forEach((item) => controls.push(new FormControl(item)));

    this.parentForm.addControl("itemsForm", new FormArray(controls));

    console.log(this.parentForm);
}

推荐答案

您需要在表单数组中使用嵌套的表单组.我喜欢在构造函数中注入formbuilder，在此示例中，我用 fb 引用它.

You'd need to use nested form groups inside the form array. I like to inject formbuilder in constructor, here in this sample I refer to it with fb.

所以建立您的表格...

So build your form...

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 的输入字段，其他字段则可以纯文本形式显示:

Then in your view iterate this formarray and display input field for value and the others can be shown just as plain text:

....
<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>
....

您可能还想实际使用变量，为它们分配不同的表单控件路径"，而不要使用例如. parentForm.controls.itemsForm.controls ，但这只是一个建议:)

You'd also perhaps want to actually use variables, to which you assign the different form control "paths" and not use e.g... parentForm.controls.itemsForm.controls but that is just a suggestion :)

这篇关于一个只有一个列的tbody中的formArray待验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！