只需要在嵌套的FormArray-Angular中没有键的JSON值

Question

我有一个Angular表单，它从用户那里获取输入并将其转换为JSON对象。

我需要这样的输出：

{"Name":"sam","age":"21","Friends":[{"Name":"bob","mobile":["123","456","789"]}]}

我需要不带键的JSON值，在另一个JSON列表中

"mobile":["123","456","789"] 

我使用Reactive表单并创建了一个嵌套的FormArray，通过这样做，我可以得到这样的输出：

{"Name":"sam","age":"21","Friends":[{"Name":"bob","mobile":"123"}]}

但是，如何使用上面提到的值(不带键(创建另一个嵌套的FormArray？

我的组件.ts

this.peopleList = this._fb.group({
Name : '',
age : '',
Friends: this._fb.array([this.CreateFriendList()])
});
CreateFriendList(): FormGroup {
return this._fb.group({
Name: '',
mobile : '',
});
}

Answer 1

您需要像这样修改您的代码

首先，如果您想在表单组中创建数组

CreateFriendList(): FormGroup {
return this._fb.group({
Name: '',
mobile : new FormArray(mobile),
});
}

然后你必须像这样循环移动电话号码，并将其传递给formarray。它将创建阵列的列表

// mobile number
mobile=[1231323123,14231323,1231434134];
const mobile= this.mobile.map(c => new FormControl(c));

Html

<form [formGroup]="form" (ngSubmit)="submit()">
<label formArrayName="mobile" *ngFor="let order of form.controls.mobile.contols; let i = index">
<input type="text" [formControlName]="i">
{{mobile[i] }}
</label>
</form>

Answer 2

首先定义数组

const mobileNumbers = [];

然后使用嵌套循环从原始对象中获取手机号码。在我的示例中，它被命名为list。

// get each main element
list.forEach( element => { 
// get the mobile number of each friend
element.Friends.forEach( friend => { 
mobileNumbers.push(friend.mobile);
});    
});
// check the outcome 
console.log(mobileNumbers);

Answer 3

这样尝试：

CreateFriendList(): FormGroup {
return this.fb.group({
Name: '',
mobile: this.fb.array([]),
});
}

getFriendsData() {
return this.peopleList.get('Friends') as FormArray;
}
getFriendsNumber(): Array<any>{
return this.getFriendsData().get('mobile').value
}
updateMobileNumber(){
this.getFriendsNumber().push('122')
}

Answer 4

您只需要为每个手机号码创建controls，而不是创建group

createFriendList(): FormGroup {
return this._fb.group({
name: '',
mobile : this._fb.array(this.createFriendsMobileList()),
});
}
createFriendsMobileList() {
return [
this._fb.control(''),
this._fb.control(''),
this._fb.control('')
];
}

请参阅我在此处创建的示例：https://stackblitz.com/edit/angular-reactive-forms-control

Answer 5

你可以试试：

import { FormBuilder, FormGroup, Validators, NgForm } from '@angular/forms';
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './component.html',
styleUrls: ['./component.css']
})
export class LoginComponent implements OnInit {
private loginForm: any;
constructor(
private formBuilder: FormBuilder
) {
this.loginForm = this.formBuilder.group({
name:      ['', Validators.compose([Validators.required])],
age:       ['', Validators.compose([Validators.required])],
friends:   [
this.formBuilder.group({
fName: ['', Validators.compose([Validators.required])],
mobiles: [[], Validators.compose([Validators.required])],
}),
Validators.compose([Validators.required, 
Validators.minLength(1)])
]
});
}

我不确定它对你是否有帮助。您可以从上面的代码中获得一个想法。

Answer 6

我想过这样做，

this.peopleList = this._fb.group({
Name : '',
age : '',
Friends: this._fb.array([this.CreateFriendList()])
});
CreateFriendList(): FormGroup {
return this._fb.group({
Name: '',
mobile : '',
});
}
const mobileList = this.peopleList.get('Friends') as FormArray;
for (let i = 0; i < mobileLists.length; i++) {
this.peopleList.value.Friends[i].mobile = this.peopleList.value.Friends[i].mobile.split(' ') ;
}

通过这种方式，用户可以输入多个以空格分隔的手机号码，分割操作将以数组形式返回。

"mobile":["123","456","789"] 

我可以得到这样的输出。