2

我正在创建这个页面，该页面假设包含多个响应式来源（例如，对于每个国家/地区）。这些表单应该基于我从后端获得的 json 数组创建，以便用户可以查看当前设置是什么并单独更新。因为我不知道我将获得多少这些数据集，所以我为我获得的每个数据集创建了一个主表单和一个 FormArray。但是，如果我在表单验证器将其中一个字段标记为无效时使用 FormArray，则整个表单将被标记为无效（所有 FormArray 嵌套表单）。

我还尝试为可观察对象中的每个数据集创建不同的表单，但它给了我以下错误

TS2339: Property 'countryForm' does not exist on type 'CountryComponent'.

所以这是我的 TS

export class CountryComponentimplements OnInit {

// Form
countryForm: FormGroup;

  ngOnInit() {
    this.spinner.show();
    this.GetCountryDef();
  }

 GetCountryDef() {
    // tslint:disable-next-line:max-line-length
    this.http.get(`https://api_call`).subscribe(
        (data: any) => {

        // Form
        const CountryArray = new FormArray(data.map(item => new FormGroup({
          country: new FormControl(item.country, Validators.required),
          population: new FormControl(item.population, Validators.pattern(/\-?\d*\.?\d{1,5}/)),
          GPD: new FormControl(item.GPD, Validators.pattern(/\-?\d*\.?\d{1,5}/))
          .......
        }),
      ));

        this.countryForm= this.fb.group({
          country: CountryArray ,
        });

      this.spinner.hide();
      }

      );
 }

我的html

<td mat-cell *matCellDef="let country; let i = index">  
            <form style="width: inherit;" [formGroup]="countryForm">
                <div formArrayName="country">
                    <div formGroupName={{i}}>
                        <label >populcation:</label> 
                        <input matInput type="number" formControlName="population">

                        <label >GPD:</label>  
                        <input matInput type="number" formControlName="GPD">
.......
            </form>
          </td>

所以我的问题是如何从可观察对象动态创建 FromGroup，或者如何使验证器仅标记一个 FormArray 的错误？

==================================================== =============================@AJT_82 我试过了，但是即使加载了表格也没有显示。

所以我把它改成了

   export class CountryComponentimplements OnInit {
   // Form
   //countryForm: FormGroup;

和

   let countryForm: FormGroup; // Will change to to different form for each country after
    countryForm= this.fb.group({
      country: CountryArray ,
    });

它给了我同样的错误

TS2339: Property 'countryForm' does not exist on type 'CountryComponent'.
4

1 回答 1

0

用户，您在使用 mat-table 吗？Mat table work 由数组提供，数组确实可以是 FormControls 的数组，但是使用 Form Controls 的数组很难。

mat-table 希望你能吃一些喜欢的东西

[{country:new FormControl(),population:new FormControl(),GDP:new FormControl()},
 {country:new FormControl(),population:new FormControl(),GDP:new FormControl()},
 {country:new FormControl(),population:new FormControl(),GDP:new FormControl()}
...]

取而代之的是，您可以使用数组制作普通表

    <table >
        <thead>
            <tr >
                <th >Country</th>
                <th >Population</th>
                <th >GDP</th>
            </tr>
        </thead>
        <tbody *ngIf="formArray" [formGroup]="formArray">
            <tr  *ngFor="let item of formArray.controls;let i=index" [formGroupName]="i">
                <td ><input formControlName="country"></td>
                <td ><input formControlName="population"></td>
                <td ><input formControlName="GDP"></td>
            </tr>
        </tbody>
    </table>

我更喜欢引用数组本身。

如果我们在构造函数中注入 FormBuilder

  constructor(private fb:FormBuilder){}

我们的 formArray 可以是前者：

  this.formArray=new FormArray(data.map(item=>{
    return this.fb.group({
      country:item.position,
      population:item.name,
      GDP:item.weight
    })
  }));
于 2019-02-11T22:41:09.013 回答