Question

我正在尝试在提交表单时创建2个单独的对象。下面是我的代码：

test.html

<form [formGroup]="gamificationForm" (ngSubmit)="onSubmit()">

<div *ngFor="let medal of medalResponse; let iMedal=index" class="row col-lg-12 mtop-custom-10 medal-level-point-config">
      <input type="hidden" class="point-text" [(ngModel)]="medal.medalId" formControlName="medalId" />
      <div class="col-lg-4 col-6">
        {{medal.medalName}}
        <input type="hidden" class="point-text" [(ngModel)]="medal.medalName" formControlName="medalName" />
      </div>
      <div class="col-lg-4 col-6">
        <input type="number" class="point-text" [(ngModel)]="medal.points" formControlName="points" />
      </div>
    </div>

<button class="custom-btn-class" name="submit" type="submit">Save</button>

</form>

打字稿：

    gamificationForm = this.fb.group({
    medals: this.fb.group({
      medalId: [''],
      medalName: [''],
      points: ['']
    })
  });

onSubmit() {
    console.warn(this.gamificationForm.value);
}

JSON：

It is printing last values from the loop on html page and in json too.

Answer 1

您可以将此JSON值转换为所需的格式，

format(value) {
  return [
     {
       Level: [
         {
          "levelId-0":value.levelId-0,
          "level-0":value.level-0,
          "points-0":value.points-0
         },
         ....
       ],
       Medal: [
         .....
       ]
     }
  ]
}

Answer 2

不幸的是，我还没有通过Template-driven表单来做到这一点，但这里是我的想法：

您需要通过将# Create example data ---- library(survey) library(srvyr) set.seed(1999) ## Data frame of responses and grouping information likert_response_options <- c("1 - Strongly Disagree", "2", "3", "4", "5 - Strongly Agree") data_df <- data.frame( group_vbl = factor(sample(LETTERS[1:4], 20, replace = TRUE), LETTERS[1:4]), likert_item = factor(x = sample(likert_response_options, 20, replace = TRUE), levels = likert_response_options), weights = rnorm(20, mean = 1, sd = 0.1) ) ## Create a survey design object from the data frame my_survey_design <- as_survey_design(data_df, weights = weights)包装到# Create weighted summaries ---- my_survey_design %>% group_by(group_vbl, likert_item) %>% summarize(proportion = survey_mean()) #> # A tibble: 20 x 5 #> group_vbl likert_item proportion proportion_low proportion_upp #> <fct> <fct> <dbl> <dbl> <dbl> #> 1 A 1 - Strongly Disagree 0.300 -0.252 0.851 #> 2 A 2 0 0 0 #> 3 A 3 0.700 0.149 1.25 #> 4 A 4 0 0 0 #> 5 A 5 - Strongly Agree 0 0 0 #> 6 B 1 - Strongly Disagree 0.127 -0.130 0.384 #> 7 B 2 0.146 -0.143 0.435 #> 8 B 3 0.259 -0.0872 0.606 #> 9 B 4 0.468 0.0577 0.878 #> 10 B 5 - Strongly Agree 0 0 0 #> 11 C 1 - Strongly Disagree 0 0 0 #> 12 C 2 0.241 -0.213 0.696 #> 13 C 3 0.292 -0.221 0.804 #> 14 C 4 0.250 -0.216 0.716 #> 15 C 5 - Strongly Agree 0.217 -0.205 0.639 #> 16 D 1 - Strongly Disagree 0 0 0 #> 17 D 2 0.529 0.0906 0.967 #> 18 D 3 0 0 0 #> 19 D 4 0.159 -0.156 0.474 #> 20 D 5 - Strongly Agree 0.312 -0.0888 0.713容器中并尝试将字段分为Level和Medal数组。

每个*ngFor都应该设置位置<ng-container formArrayName="Level">，但是您将需要进行实验，看看*ngFor指令是否为您做到了。

快乐的ng编码！

在表单上创建对象，以7号打字稿提交

2 个答案: