Как заполнить данные в FormGroup?

Question

Я пытаюсь ввести данные в группу форм «технологии», но не могу этого сделать;

Здесь: https://stackblitz.com/edit/angular-fzgtqc?file=src%2Fapp%2Fapp.component.ts (Воспроизводимый пример)

editTrainner(trainner: Trainner) {
    this._trainnerservice.currentTrainner = Object.assign({}, trainner);
    this.registrationForm.patchValue({
          personal_details: { type: Object,
            name: { type: Object,
                first_name:this._trainnerservice.currentTrainner.personal_details.name.first_name,
                last_name: this._trainnerservice.currentTrainner.personal_details.name.last_name
            },
            dob: this._trainnerservice.currentTrainner.personal_details.dob,
            about_yourself: this._trainnerservice.currentTrainner.personal_details.about_yourself,
            willingly_to_travel: this._trainnerservice.currentTrainner.personal_details.willingly_to_travel
        }
    });
    this.addlanguages_known();
    this.addTechs();
  }
  addlanguages_known(): any {
    const control = this.registrationForm.get('personal_details.languages_known') as FormArray;
    this._trainnerservice.currentTrainner.personal_details.languages_known.forEach(x => {
        control.push(this.fb.control(x));
      });
  }

  addTechs(): any {
    const control =  this.registrationForm.get('technologies') as FormArray;
    console.log(control);
    this._trainnerservice.currentTrainner.technologies.forEach(x => {
      control.push(this.fb.control(x));
    });
  }

Answer 1

Angular предоставляет возможность инициализации вашего FormGroup при создании.Я бы посоветовал вам инициализировать значения при создании registrationForm, как показано ниже.

this.registrationForm = this.fb.group({
    ...
    technologies: this.fb.array(
        this.data.technologies && this.data.technologies.length ? 
            this.data.technologies.map(tech => this.addTech(tech)) : [this.addTech()]
    ),
    ...
});

addTech(tech: Technology = {costing: {}} as Technology): FormGroup {
    return this.fb.group({
        name: [tech.name || ''],
        experience : [tech.experience || ''],
        ratings : [tech.ratings || ''],
        costing :  this.fb.group({
            freshers: [tech.costing.freshers || ''],
            laterals : [tech.costing.laterals || ''],
            project_specific: [tech.costing.project_specific || '']
        }),
        work_as_consultant: [tech.work_as_consultant || '']
    });
}

, где ваш Technology интерфейс будет выглядеть примерно так

export interface Technology {
    name: string;
    experience: number;
    ratings: number;
    costing: Costing;
    work_as_consultant: string;
}

export interface Costing {
    freshers: number;
    laterals: number;
    project_specific: number;
}

Аналогично, создайте интерфейсы длядругие группы форм и инициализируйте их при создании, как показано выше.

Answer 2

Вам нужно вызвать patchValue вместо того, чтобы вводить значения в control.Элементы управления формой должны быть добавлены в formArray, когда вам нужно добавить дополнительные элементы управления в форму.

this.registrationForm.patchValue({
  technologies: this._trainnerservice.currentTrainner.technologies
});

Answer 3

ngOnInit() {


    this.registrationForm = this.fb.group({
      personal_details : this.fb.group({
        name: this.fb.group({
          first_name: [''],
          last_name: ['']
        }),
        about_yourself: [''],
        dob: [''],
        // lang: [''],
        languages_known: this.fb.array([]),
        willingly_to_travel: ['']
      }),
      technologies: this.fb.array([
        this.addTech()
      ]),

      certifications : this.fb.array([
        this.addCertificate()
      ]),
    });
    // this.getAllTrainners();
    this.editTrainner();

     this.registrationForm.patchValue({
      technologies: this._trainnerservice.currentTrainner.technologies
});