Редактирование формы в Angular

Пожалуйста помоги!! Мне очень сложно редактировать форму. Я работаю с реактивной формой, добавляю данные в форму и отправляю в базу данных, работаю очень хорошо. Теперь я хочу запросить данные в базе данных, чтобы я мог отредактировать их и отправить снова. Данные получены из базы данных в виде объекта json, я попытался назначить его переменной группы формы, чтобы я мог отображать данные в форме и отправлять их, но получаю ошибки.

Я также попытался отобразить данные с помощью формы, управляемой шаблоном. Он работает со значениями в полях ввода, но каждый раз, когда я пытаюсь связать данные с ngModel, значения в поле ввода становятся пустыми. Так как значения получены из базы данных.

<div class="container">
<h4 class="card-title">Edit Questionnaire</h4>
  <div *ngIf="questionnaires"> 
        <form  #myForm="ngForm" novalidate (ngSubmit)="onSubmit(text)" >
                <div *ngFor="let item of questionnaires.item;" > 
                    <div class="form-group">
                        <input type="text" value="{{ item.prefix }}" class="form-control" ngModel>    
                    </div>

                      <div class="form-group">
                          <input type="text" value="{{ item.text }}" class="form-control" ngModel>  
                      </div>

                      <div *ngFor="let option of item.options; ">
                        <div *ngIf="option.value !== '' ">
                            <div class="form-group">
                                <input type="text" value="{{ option.value }}" class="form-control" ngModel>  
                            </div>
                        </div>

                    </div>

                </div>
                <button type="submit" class="btn btn-primary" [disabled]="!myForm.valid">Submit</button>
             <!--  </div> -->
      </form>
</div>

Please help!! It is possible to edit a form and send to the database in angular. My Edit Questionnaire component looks like this I am using loopback to query the data from the database

 import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { QuestionnaireApi } from '../../app/shared/sdk/services';

import { Validators, FormGroup, FormArray, FormBuilder } from '@angular/forms';


@Component({
  selector: 'app-editquestionnaire',
  templateUrl: './editquestionnaire.component.html',
  styleUrls: ['./editquestionnaire.component.scss']
})
export class EditquestionnaireComponent implements OnInit {

   myForm: FormGroup;
   id: string;
   questionnaires: any;
   text: any = [];


  constructor(
    private router: ActivatedRoute,
    private questionnaireapi: QuestionnaireApi,
    private _fb: FormBuilder
  ) { }

  ngOnInit() {
       this.router.params.subscribe(params=>{
            this.id = params.id;
       });

       this.myForm = this._fb.group({
          name: ["", Validators.required],
          description: ["", Validators.required],
          items: this._fb.array([
              this.initItem(),
          ])
      });


     this.questionnaireapi.findById(this.id).subscribe((data)=>{
              this.questionnaires = data;
           //   this.myForm = <FormGroup>this.questionnaires;
              console.log(this.myForm.value);
      },(error)=>{
              console.log(error);
      })
  }



     initItem(){
        // initialize our item
        return this._fb.group({
            prefix: ["", Validators.required],
            text: ["", Validators.required],
            Questiontype: ["", Validators.required],
            options: this._fb.array([
                this.InitOption(),
            ])
        });
    }


    InitOption(){
         return this._fb.group({
             value: [""]
         })
    }

   onSubmit(){

   }

}

person Unah Henry    schedule 01.04.2018    source источник
comment
Ваш вопрос слишком расплывчатый, чего именно вы пытаетесь достичь и каков фактический результат? См. раздел Как задать хороший вопрос?.   -  person Dan Macák    schedule 01.04.2018
comment
Моя цель - отредактировать ту html-форму, которую я разместил. значения отображаются в поле ввода, но когда я добавил ngModel для получения значений, значения исчезают. Если вы можете опубликовать ссылки или учебные пособия о том, как редактировать динамическую форму в angular, я был бы очень признателен. Спасибо   -  person Unah Henry    schedule 01.04.2018
comment
вы пробовали this.myform.patchValue(newJsonValueFromDB) ?? angular.io/api/forms/AbstractControl#patchValue   -  person Nadhir Falta    schedule 02.04.2018


Ответы (1)


Unan, мне нравится функция создания формы. Вы передаете этой функции "данные" в качестве аргумента или нет. Когда вы хотите создать From Array, вы вызываете функцию, которая возвращает FormGroup[] и имеет в качестве аргумента массив. Самый простой способ - вернуть "преобразованный массив". Поэтому мы используем return myArray.map(x=>...), который говорит, что с каждым элементом массива вы формируете FormGroup.

Итак, если у вас есть «данные», вы можете сделать

   this.myForm=createForm(data)

если у вас нет данных, вы можете сделать

   this.myForm=createForm(null)

Функции должны быть "как" - в конструкторе у меня есть конструктор (частный fb: FormBuilder) -

  createForm(data:any):FormGroup
  {
     return this.fb.group({
         //see, if data, the value of name will be data.name, else ""
         name: [data?data.name:"", Validators.required],
         //idem description
         description: [data?data.description:"", Validators.required],
         items: this.fb.array([
            this.getItem(data?data.items:null),
         ])
      });
  }
  getItem(items:any[]):FormGroup[]
  {
      return items?items.map(x=>
      {
          return this.fb.group({
              prefix: [x.prefix, Validators.required],
              text: [x.text, Validators.required],
              Questiontype: [x.QuestionType, Validators.required],
              options: this.fb.array(this.getOptions(x.options))
             })
      }):[this.fb.group({
              prefix: ["", Validators.required],
              text: ["", Validators.required],
              Questiontype: ["", Validators.required],
              options: this.fb.array([this.fb.group({value:""}])
      })]    
  }
  getOptions(options:any):FormGroup[]
  {
     return options?options.map(x=>{
          return this.fb.group({
             value:x.value
          })
     }):
     [this.fb.group({value:""})]
  }
person Eliseo    schedule 01.04.2018
comment
Большое спасибо. Функция создания формы работает, но элементы получения и параметры получения не работают, поскольку значения по-прежнему остаются пустыми. Когда я пытаюсь добавить formControlName для префикса, текста и значений, мне сообщается, что элемент управления формы не найден. Пожалуйста, как я могу это исправить? Спасибо - person Unah Henry; 01.04.2018
comment
Я нашел решение здесь stackoverflow.com/questions/46694787/ - person Unah Henry; 03.04.2018
comment
@ Уна, извини за задержку. Я всегда создаю массив, как показано (используя карту над массивом). Я думаю, что будут проблемы с вашими данными. Я использую такие данные, как [{name:'a',description:'b',items:[{prefix:'c',text:'d',QuestionType:'e',options:[{value:'f' }.{значение: 'g']]}]. В любом случае, мне нравится, что вы решили проблему самостоятельно :) - person Eliseo; 04.04.2018