Пожалуйста помоги!! Мне очень сложно редактировать форму. Я работаю с реактивной формой, добавляю данные в форму и отправляю в базу данных, работаю очень хорошо. Теперь я хочу запросить данные в базе данных, чтобы я мог отредактировать их и отправить снова. Данные получены из базы данных в виде объекта 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(){
}
}