[英]convert and concatenate multiple FormGroup types to object type in Angular 5
Im using mat-stepper of Angular Material design library. 我正在使用Angular Material设计库的mat-stepper。
I use 3 separate FormGroups. 我使用3个单独的FormGroups。 I would send informations to database using httpClient method, for that I have created an interface : 我将使用httpClient方法将信息发送到数据库,为此我创建了一个接口:
export interface NouveauProjet {
leadProj: String ;
nomProj: String;
descProj: String;
besProj: Number;
pers: [Personnes];
Backlog: [Fonctionnalite]
}
export interface Personnes {
name: String;
poste:String
}
export interface Fonctionnalite {
fonctionnalite: String;
userStory: String
}
In my component file I create forms and nouveauProject
variable that will contain my values . 在我的组件文件中,我将创建将包含我的值的表单和nouveauProject
变量。
export class AjoutProjetComponent implements OnInit {
isLinear = false;
firstFormGroup: FormGroup;
secondFormGroup: FormGroup;
thirdFormGroup: FormGroup;
nouveauProjet: NouveauProjet;
constructor(
private _formBuilder: FormBuilder,
private ajoutProj: AjoutprojService
) {}
ngOnInit() {
console.log();
this.firstFormGroup = this._formBuilder.group({
leadProj: ["", Validators.required],
nomProj: ["", Validators.required],
descProj: ["", Validators.required],
besProj: ["", Validators.required]
});
this.secondFormGroup = this._formBuilder.group({
pers: this._formBuilder.array([this.createItem()])
});
this.thirdFormGroup = this._formBuilder.group({
backlog: this._formBuilder.array([this.createFonct()])
});
}
createItem(): FormGroup {
return this._formBuilder.group({
name: ["", Validators.required],
poste: ["", Validators.required]
});
}
createFonct(): FormGroup {
return this._formBuilder.group({
fonctionnalite: ["", Validators.required],
userStory: ["", Validators.required]
});
}
I call my service and before I concatenate formGroup.value. 我先调用服务,然后再连接formGroup.value。
addProjet() {
this.nouveauProjet =
this.firstFormGroup.value +
this.secondFormGroup.value +
this.thirdFormGroup.value;
console.log(this.nouveauProjet);
this.ajoutProj
.addProj(this.nouveauProjet)
.toPromise()
.then(res => {
console.log(res.json);
});
}
}
In html file I call addProject
function then I print {{nouveaProjet | json}}
在html文件中,我调用addProject
函数,然后打印{{nouveaProjet | json}}
{{nouveaProjet | json}}
value I get this : {{nouveaProjet | json}}
值,我得到了:
"[object Object][object Object][object Object]"
How to print all values ? 如何打印所有值?
Update: this.firstFormGroup.value, this.secondFormGroup.value, this.thirdFormGroup.value gives in order : 更新: this.firstFormGroup.value,this.secondFormGroup.value,this.thirdFormGroup.value按顺序给出:
Object cannot be concatenated with +
so you could try: 无法将对象与+
串联,因此您可以尝试:
Old way: 旧方法:
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
this.nouveauProjet = __assign(this.firstFormGroup.value, this.secondFormGroup.value, this.thirdFormGroup.value);
Using ES6 spread operator : 使用ES6 传播算子 :
this.nouveauProjet = {
...this.firstFormGroup.value,
...this.secondFormGroup.value,
...this.thirdFormGroup.value
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.