title: Editing a Form in Angular
body: <p>Please help!! I am finding it very difficult to edit a form. I working with reactive form and adding data to the form and sending to the database works very well. Now I want to query the data in the database so I can edit it and send it again. The data is gotten from the database in form of a json object, I have tried to assign it to a form Group variable so I can display the data in the form and send it but I get errors.</p>
  
  <p>I Have also tried displaying the data with the template driven form. It works with the values in the input fields but anytime I try to bind the data with ngModel the values in the input field becomes blank. Since the values are gotten from the database.</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;h4 class="card-title"&gt;Edit Questionnaire&lt;/h4&gt;
    &lt;div *ngIf="questionnaires"&gt; 
          &lt;form  #myForm="ngForm" novalidate (ngSubmit)="onSubmit(text)" &gt;
                  &lt;div *ngFor="let item of questionnaires.item;" &gt; 
                      &lt;div class="form-group"&gt;
                          &lt;input type="text" value="{{ item.prefix }}" class="form-control" ngModel&gt;    
                      &lt;/div&gt;
  
                        &lt;div class="form-group"&gt;
                            &lt;input type="text" value="{{ item.text }}" class="form-control" ngModel&gt;  
                        &lt;/div&gt;
  
                        &lt;div *ngFor="let option of item.options; "&gt;
                          &lt;div *ngIf="option.value !== '' "&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;input type="text" value="{{ option.value }}" class="form-control" ngModel&gt;  
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                      &lt;/div&gt;
  
                  &lt;/div&gt;
                  &lt;button type="submit" class="btn btn-primary" [disabled]="!myForm.valid"&gt;Submit&lt;/button&gt;
               &lt;!--  &lt;/div&gt; --&gt;
        &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>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</p>
  
  <pre><code> 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=&gt;{
              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)=&gt;{
                this.questionnaires = data;
             //   this.myForm = &lt;FormGroup&gt;this.questionnaires;
                console.log(this.myForm.value);
        },(error)=&gt;{
                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(){
  
     }
  
  }
  </code></pre>