Привязка данных JSON к реактивной форме

Question

Я наткнулся на следующую демонстрацию Stackblitz:

https://stackblitz.com/edit/angular-dffny7?file=app

со ссылкой на следующий пост: /questions/28127959/uglovyie-reaktivnyie-formyi-s-vlozhennyimi-massivami-form/28127969#28127969

Теперь предположим, что у меня есть следующий JSON

{
 "companies": [
  {
   "company": "ABC",
   "projects": [
     {
     "projectName": "DEF"
     },
     {
     "projectName": "GHI"
     }
    ]
   },
   {
    "company": "JKL",
    "projects": [
     {
     "projectName": "MNO"
     }
   ]
  }
 ]
}

исходя из следующего сервиса:

getCompanies() : Observable<Organization>{
return this.http.get(url).map((response: Response)=> response.json())}

и класс организации выглядит следующим образом:

export class Organization{
public company: String;
public projects : Project[];
}
export class Project{
public projectName : String;
}

У меня есть вышеупомянутые данные JSON в объекте класса Organization в моем файле компонента, и я хочу отобразить эти данные в полях формы в файле html. Я пытался связать данные с помощью ngModel, но где-то читал, что ngModel нельзя использовать в модельно-ориентированной форме. Как мне этого добиться?

Answer 1

@ Случайный парень, ключ для передачи данных из json в FormBuilder использует метод "map" для массивов. Но сначала, пожалуйста, используйте HttpClient, а НЕ старый и устаревший http (поэтому вам не нужно использовать эту уродливую карту ((response: Response)=> response.json())}

Ну, вы импортируете в конструктор форму Builder

constructor (private fb:FormBuilder){}

И сделайте функцию, которая получает в качестве аргумента ваш json или null и возвращает fromGroup

  createForm(data: any): FormGroup {
    return this.fb.group({
      //id data.companies, we create a formArray
      companies: data ? this.fb.array(this.createGroupProjects(data.companies)) : []
    })
  }
  //return an array of FormGroups
  createGroupProjects(companies: any[]): FormGroup[] {
    //with each element in companies
    return companies.map(c => {
      //create a formGroup
      return this.fb.group({
        company: c.company,
        //projects will be a form array too
        projects: this.fb.array(this.createProjects(c.projects))
      })
    })
  }
  //return an array of FormGroups
  createProjects(projects: any[]): FormGroup[] {
    //with each project
    return projects.map(p => {
      //return a FormGroup
      return this.fb.group({
        projectName: p.projectName
      })
    })
  }

Конечно, вы можете использовать только функцию

  createForm(data: any): FormGroup {
    return this.fb.group({
      //in "companies" if data.companies, we return a FormArray
      //with each element of data.companies we return a formGroup
      companies: data ? this.fb.array(data.companies.map(c => {
        return this.fb.group({
          company: c.company,
          //the propertie projects will be another FormArray
          //with each element in projects
          projects: this.fb.array(c.projects.map(p => {
            //return a formGroup
            return this.fb.group({
              projectName: p.projectName
            })
          }))
        })
      }))
        //If data=null, you return an array
        : []
    })
  }

Убедитесь, что ваш FormArray создан с использованием this.bt.array(... массив formGroup...), а этот formGroupArray создан с использованием "map".