Как динамически создать FromGroup из наблюдаемой?

Question

Я создаю эту страницу, которая должна содержать несколько реактивных ответов (например, для каждой страны). Эти формы должны быть основаны на массиве 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'.

Answer 1

Пользователь, вы используете мат-стол? Работа таблицы матов осуществляется с помощью массива, это правда, что массив может быть массивом FormControls, но это тяжелая работа с массивом Form Controls.

мат-таблицы ожидают, что вы кормите с некоторыми как

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