【发布时间】：2022-01-10 21:38:18
【问题描述】：
美好的一天，我正在做一个关于 angular 的应用程序，其中创建一个步骤流，我为此使用 angular material stepper；当用户完成所有步骤时，我需要将所有输入保存在 json 结构中，现在我将所有输入保存在数组中，但不知道如何将数组转换为 json 结构。
{
user: {
"nombreCtrl":"Esperanza",
"ap_paternoCtrl":"Wiesse ",
"ap_maternoCtrl":"Gutierrez",
"dniCtrl":"123456"
},
adress: {
"regionCtrl":"Cusco",
"provinciaCtrl":"Cusco",
"distritoCtrl":"Cusco",
"dirrecionCtrl":"sdfg"
},
pay: {
"targeraCtrl":"1234567890",
"seguridadCtrl":"234"
}
}
这是我的 Angular 代码（此代码是一个示例，说明了我正在尝试做的事情）。
pay.component.html
<form [formGroup]="formGroup" (ngSubmit)="submit(formGroup.value)">
<mat-stepper #stepper formArrayName="formArray" >
<!-- paso 1 -->
<mat-step errorMessage="Name is required." formGroupName="0" [stepControl]="formArray?.get([0])!">
<!-- nombre del paso -->
<ng-template matStepLabel>Fill out your name</ng-template>
<!-- input -->
<mat-form-field appearance="fill">
<mat-label>Nombre</mat-label>
<input matInput placeholder="Last name, First name" formControlName="nombreCtrl" required>
</mat-form-field>
<br>
<mat-form-field appearance="fill">
<mat-label>Apellido paterno</mat-label>
<input matInput placeholder="Last name, First name" formControlName="ap_paternoCtrl" required>
</mat-form-field>
<br>
<mat-form-field appearance="fill">
<mat-label>Apellido materno</mat-label>
<input matInput placeholder="Last name, First name" formControlName="ap_maternoCtrl" required>
</mat-form-field>
<br>
<mat-form-field appearance="fill">
<mat-label>DNI</mat-label>
<input matInput placeholder="Last name, First name" formControlName="dniCtrl" required>
</mat-form-field>
<!-- button -->
<div>
<p>Go to a different step to see the error state</p>
<button type="button" mat-button matStepperNext>Next</button>
</div>
</mat-step>
<!-- paso 1 end -->
<!-- paso 2 -->
<mat-step errorMessage="Address is required." formGroupName="1" [stepControl]="formArray?.get([1])!">
<!-- nombre del paso -->
<ng-template matStepLabel>Dirrecion de entrega</ng-template>
<!-- input -->
<mat-form-field appearance="fill">
<mat-label>Region</mat-label>
<input matInput placeholder="Ex. 1 Main St, New York, NY" formControlName="regionCtrl"
required>
</mat-form-field>
<br>
<mat-form-field appearance="fill">
<mat-label>Provincia</mat-label>
<input matInput placeholder="Last name, First name" formControlName="provinciaCtrl" required>
</mat-form-field>
<br>
<mat-form-field appearance="fill">
<mat-label>Distrito</mat-label>
<input matInput placeholder="Last name, First name" formControlName="distritoCtrl" required>
</mat-form-field>
<br>
<mat-form-field appearance="fill">
<mat-label>Dirreccion</mat-label>
<input matInput placeholder="Last name, First name" formControlName="dirrecionCtrl" required>
</mat-form-field>
<!-- button -->
<div>
<p>Go to a different step to see the error state</p>
<button type="button" mat-button matStepperPrevious>Back</button>
<button type="button" mat-button matStepperNext>Next</button>
</div>
</mat-step>
<!-- paso 2 end -->
<!-- paso 3 -->
<mat-step errorMessage="Address is required." formGroupName="2" [stepControl]="formArray?.get([2])!">
<!-- nombre del paso -->
<ng-template matStepLabel>Pay your order</ng-template>
<!-- input -->
<mat-form-field appearance="fill">
<mat-label>numero de targeta de credito</mat-label>
<input matInput placeholder="Ex. 1 Main St, New York, NY" formControlName="targeraCtrl"
required>
</mat-form-field>
<br>
<mat-form-field appearance="fill">
<mat-label>numero de seguridad </mat-label>
<input matInput placeholder="Ex. 1 Main St, New York, NY" formControlName="seguridadCtrl"
required>
</mat-form-field>
<!-- button -->
<div>
<p>Go to a different step to see the error state</p>
<button type="button" mat-button matStepperPrevious>Back</button>
<button type="button" mat-button matStepperNext>pagar</button>
</div>
</mat-step>
<!-- paso 3 end -->
<!-- paso 4 -->
<mat-step>
<ng-template matStepLabel>Done</ng-template>
<p>su compra fue exitosa</p>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button type="submit" >Done</button>
<button mat-button (click)="stepper.reset()">Reset</button>
</div>
</mat-step>
<!-- paso 4 end -->
</mat-stepper>
</form>
pay.component.ts
export class PayComponent implements OnInit {
formGroup !: FormGroup ;
constructor(
private _formBuilder: FormBuilder,
public _payService: PayService
) {}
ngOnInit() {
this.formGroup = this._formBuilder.group({
formArray: this._formBuilder.array([
this._formBuilder.group({
nombreCtrl: ['', Validators.required],
ap_paternoCtrl: ['', Validators.required],
ap_maternoCtrl: ['', Validators.required],
dniCtrl: ['', Validators.required],
}),
this._formBuilder.group({
regionCtrl: ['', Validators.required],
provinciaCtrl: ['', Validators.required],
distritoCtrl: ['', Validators.required],
dirrecionCtrl: ['', Validators.required]
}),
this._formBuilder.group({
targeraCtrl: ['', Validators.required],
seguridadCtrl: ['', Validators.required]
}),
])
});
}
get formArray(): AbstractControl | null {
return this.formGroup.get('formArray');
}
submit(f: FormGroup) {
if (f.invalid) {
return;
}
// transform array in json
let jsonPay = JSON.stringify(f);
}
当我在 json 中转换数组时，它具有这种结构，但它不是我想要的结构。我不知道如何修改这个结构。
{
"formArray":[
{
"nombreCtrl":"Esperanza",
"ap_paternoCtrl":"Wiesse ",
"ap_maternoCtrl":"Gutierrez",
"dniCtrl":"123456"
},
{
"regionCtrl":"Cusco",
"provinciaCtrl":"Cusco",
"distritoCtrl":"Cusco",
"dirrecionCtrl":"sdfg"
},
{
"targeraCtrl":"1234567890",
"seguridadCtrl":"234"
}
]
}
【问题讨论】：
标签： arrays json angular angular-material