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

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

0 голосов
/ 23 сентября 2018

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

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

со ссылкой на следующий пост: https://stackoverflow.com/a/48527939/7429196

Теперь предположим, что у меня есть следующий 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())}

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

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

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

1 Ответ

0 голосов
/ 23 сентября 2018

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

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

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

...