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？

我的component.ts

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

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

Answer 1

首先定义数组

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 2

尝试这样：

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 3

您需要像这样修改代码

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

import com.wisely.ch9_2.domain.Person;
import org.springframework.batch.core.Job;
import org.springframework.batch.core.Step;
import org.springframework.batch.core.configuration.annotation.EnableBatchProcessing;
import org.springframework.batch.core.configuration.annotation.JobBuilderFactory;
import org.springframework.batch.core.configuration.annotation.StepBuilderFactory;
import org.springframework.batch.core.launch.support.RunIdIncrementer;
import org.springframework.batch.core.launch.support.SimpleJobLauncher;
import org.springframework.batch.core.repository.JobRepository;
import org.springframework.batch.core.repository.support.JobRepositoryFactoryBean;
import org.springframework.batch.item.ItemProcessor;
import org.springframework.batch.item.ItemReader;
import org.springframework.batch.item.ItemWriter;
import org.springframework.batch.item.database.BeanPropertyItemSqlParameterSourceProvider;
import org.springframework.batch.item.database.JdbcBatchItemWriter;
import org.springframework.batch.item.file.FlatFileItemReader;
import org.springframework.batch.item.file.mapping.BeanWrapperFieldSetMapper;
import org.springframework.batch.item.file.mapping.DefaultLineMapper;
import org.springframework.batch.item.file.transform.DelimitedLineTokenizer;
import org.springframework.batch.item.validator.Validator;
import org.springframework.context.annotation.Bean;
import org.springframework.core.io.ClassPathResource;
import org.springframework.transaction.PlatformTransactionManager;

import javax.sql.DataSource;

//@Configuration
@EnableBatchProcessing
public class CsvBatchConfig {

    @Bean
    public ItemReader<Person> reader() throws Exception {
        FlatFileItemReader<Person> reader = new FlatFileItemReader<Person>(); //1
        reader.setResource(new ClassPathResource("people.csv")); //2
        reader.setLineMapper(new DefaultLineMapper<Person>() {{ //3
            setLineTokenizer(new DelimitedLineTokenizer() {{
                setNames(new String[]{"name", "age", "nation", "address"});
            }});
            setFieldSetMapper(new BeanWrapperFieldSetMapper<Person>() {{
                setTargetType(Person.class);
            }});
        }});
        return reader;
    }

    @Bean
    public ItemProcessor<Person, Person> processor() {
        CsvItemProcessor processor = new CsvItemProcessor(); //1
        processor.setValidator(csvBeanValidator()); //2
        return processor;
    }


    @Bean
    public ItemWriter<Person> writer(DataSource dataSource) {//1
        JdbcBatchItemWriter<Person> writer = new JdbcBatchItemWriter<Person>(); //2
        writer.setItemSqlParameterSourceProvider(new BeanPropertyItemSqlParameterSourceProvider<Person>());
        String sql = "insert into person " + "(id,name,age,nation,address) "
                + "values(hibernate_sequence.nextval, :name, :age, :nation,:address)";
        writer.setSql(sql); //3
        writer.setDataSource(dataSource);
        return writer;
    }

    @Bean
    public JobRepository jobRepository(DataSource dataSource, PlatformTransactionManager transactionManager)
            throws Exception {
        JobRepositoryFactoryBean jobRepositoryFactoryBean = new JobRepositoryFactoryBean();
        jobRepositoryFactoryBean.setDataSource(dataSource);
        jobRepositoryFactoryBean.setTransactionManager(transactionManager);
        jobRepositoryFactoryBean.setDatabaseType("oracle");
        return jobRepositoryFactoryBean.getObject();
    }

    @Bean
    public SimpleJobLauncher jobLauncher(DataSource dataSource, PlatformTransactionManager transactionManager)
            throws Exception {
        SimpleJobLauncher jobLauncher = new SimpleJobLauncher();
        jobLauncher.setJobRepository(jobRepository(dataSource, transactionManager));
        return jobLauncher;
    }

    @Bean
    public Job importJob(JobBuilderFactory jobs, Step s1) {
        return jobs.get("importJob")
                .incrementer(new RunIdIncrementer())
                .flow(s1) //1
                .end()
                .listener(csvJobListener()) //2
                .build();
    }

    @Bean
    public Step step1(StepBuilderFactory stepBuilderFactory, ItemReader<Person> reader, ItemWriter<Person> writer,
                      ItemProcessor<Person, Person> processor) {
        return stepBuilderFactory
                .get("step1")
                .<Person, Person>chunk(65000) //1
                .reader(reader) //2
                .processor(processor) //3
                .writer(writer) //4
                .build();
    }


    @Bean
    public CsvJobListener csvJobListener() {
        return new CsvJobListener();
    }

    @Bean
    public Validator<Person> csvBeanValidator() {
        return new CsvBeanValidator<Person>();
    }



}

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

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

HTML

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

Answer 4

您只需为每个手机号码创建control，而不是创建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"]

我可以得到这样的输出。

只需要JSON值，而无需在嵌套FormArray中使用它的键-Angular

6 个答案: