在 Angular 中编辑表单
Editing a Form in 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>
请帮忙!!可以在 angular 中编辑表格并发送到数据库。
我的编辑问卷组件看起来像这样
我正在使用环回从数据库中查询数据
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(){
}
}
Unan,我喜欢有一个创建表单的功能。您是否将 "data" 作为参数传递给此函数。当你想创建一个 From Array 时,你调用一个 return 一个 FormGroup[] 的函数,并将一个数组作为参数。简单的方法是 return "array transformed"。所以我们使用 return myArray.map(x=>...) 表示数组的每个元素构成一个 FormGroup。
所以,如果你有"data",你可以
this.myForm=createForm(data)
如果你没有数据你可以做
this.myForm=createForm(null)
函数必须是 "like" -in constructor 我有 constructor(private 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:""})]
}
请帮忙!!我发现编辑表格非常困难。我使用反应式表单并将数据添加到表单并发送到数据库效果很好。现在我想查询数据库中的数据,以便我可以编辑它并再次发送。数据是以 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>
请帮忙!!可以在 angular 中编辑表格并发送到数据库。 我的编辑问卷组件看起来像这样 我正在使用环回从数据库中查询数据
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(){
}
}
Unan,我喜欢有一个创建表单的功能。您是否将 "data" 作为参数传递给此函数。当你想创建一个 From Array 时,你调用一个 return 一个 FormGroup[] 的函数,并将一个数组作为参数。简单的方法是 return "array transformed"。所以我们使用 return myArray.map(x=>...) 表示数组的每个元素构成一个 FormGroup。
所以,如果你有"data",你可以
this.myForm=createForm(data)
如果你没有数据你可以做
this.myForm=createForm(null)
函数必须是 "like" -in constructor 我有 constructor(private 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:""})]
}