表单与可迭代字段

huangapple
go评论90阅读模式
英文:

Form with iterable field

问题

I'm creating a form with some fields can be repeated:

我的表单中有一些可以重复的字段：

my form:

我的表单：

  1. newSurvey: any = {
  2.     surveyName: '',
  3.     surveyOwner: '',
  4.     questions: [
  5.       { questionTitle: '', values: ['', '', '', '', ''] }
  6.     ]
  7. };

I have created this structure for the form, where questions can be more than one. And every questions have a question Title and Values.

我已经为表单创建了这个结构，其中问题可以有多个。每个问题都有一个问题标题和值。

This is the form:

这是表单：

  1. <form (ngSubmit)="createSurvey()">
  2.     <div class="modal-body">
  3.         <label for="surveyName">Name</label>
  4.         <input type="text" id="surveyName" [(ngModel)]="newSurvey.surveyName" name="surveyName" required>
  5.     </div>
  7.    .........
  9.     <div *ngFor="let question of newSurvey.questions; let i = index" class="question">
  10.         <label for="question{{i}}">Question #{{i+1}}:</label>
  11.         <input type="text" id="question{{i}}" [(ngModel)]="question.questionTitle" name="question" required>
  13.         <label for="values{{i}}">Values: </label>
  14.         <div>
  15.             <input type="text" *ngFor="let value of question.values; let j = index" [(ngModel)]="question.values[j]"
  16.                 name="value" id="value" required>
  17.         </div>
  18.     </div>
  20.     <button type="button" (click)="addQuestion()">Add question</button>
  22.     <div class="modal-footer">
  23.         <button type="button" class="btn btn-outline-dark" type="submit">Create survey</button>
  24.     </div>
  25. </form>

Now my problem is that when I insert a value in a "Values" Field the same values is wrote in other field.

现在我的问题是，当我在一个“Values”字段中插入一个值时，相同的值也被写入其他字段。

How can I resolve? Thank you.

我应该如何解决？谢谢。

英文:

I'm creating a form with some fields can be repeated:

my form:

  1. newSurvey: any = {
  2.     surveyName: &#39;&#39;,
  3.     surveyOwner: &#39;&#39;,
  4.     questions: [
  5.       { questionTitle: &#39;&#39;, values: [&#39;&#39;, &#39;&#39;, &#39;&#39;, &#39;&#39;, &#39;&#39;] }
  6.     ]
  7.   };

I have created this structure for the form, where questions can be more than one. And every questions have a question Title and Values

This is the form:

  1. &lt;form (ngSubmit)=&quot;createSurvey()&quot;&gt;
  2.         &lt;div class=&quot;modal-body&quot;&gt;
  3.             &lt;label for=&quot;surveyName&quot;&gt;Name&lt;/label&gt;
  4.             &lt;input type=&quot;text&quot; id=&quot;surveyName&quot; [(ngModel)]=&quot;newSurvey.surveyName&quot; name=&quot;surveyName&quot; required&gt;
  5.         &lt;/div&gt;
  7.        ........
  9.         &lt;div *ngFor=&quot;let question of newSurvey.questions; let i = index&quot; class=&quot;question&quot;&gt;
  10.             &lt;label for=&quot;question{{i}}&quot;&gt;Question #{{i+1}}:&lt;/label&gt;
  11.             &lt;input type=&quot;text&quot; id=&quot;question{{i}}&quot; [(ngModel)]=&quot;question.question&quot; name=&quot;question&quot; required&gt;
  13.          
  14.             &lt;label for=&quot;values{{i}}&quot;&gt;Values: &lt;/label&gt;
  15.             &lt;div&gt;
  16.                 &lt;input type=&quot;text&quot; *ngFor=&quot;let value of question.values; let j = index&quot; [(ngModel)]=&quot;question.values[j]&quot;
  17.                     name=&quot;value&quot; id=&quot;value&quot; required&gt;
  18.             &lt;/div&gt;
  20.         &lt;/div&gt;
  22.         &lt;button type=&quot;button&quot; (click)=&quot;addQuestion()&quot;&gt;Add question&lt;/button&gt;
  24.         &lt;div class=&quot;modal-footer&quot;&gt;
  25.             &lt;button type=&quot;button&quot; class=&quot;btn btn-outline-dark&quot; type=&quot;submit&quot;&gt;Create survey&lt;/button&gt;
  26.         &lt;/div&gt;
  27.     &lt;/form&gt;

Now my problem is that when I insert a value in a "Values" Field the same values is wrote in other field.

How can I resolve? Thank you

答案1

得分: 2

问题是 *ngFor 在每次变化时都会重新渲染，为了避免这个问题，您可以实现 trackBy。

  1. <input
  2.   type="text"
  3.   *ngFor="let value of question.values; let j = index; trackBy:trackBy"
  4.   [(ngModel)]="question.values[j]"
  5.   name="value"
  6.   id="value"
  7.   required
  8. />
  1. trackBy(index: number): number {
  2.   return index;
  3. }
英文:

The problem is that *ngFor renders at every change, to avoid this you can implement tackBy

  1. &lt;input
  2.   type=&quot;text&quot;
  3.   *ngFor=&quot;let value of question.values; let j = index; trackBy:trackBy&quot;
  4.   [(ngModel)]=&quot;question.values[j]&quot;
  5.   name=&quot;value&quot;
  6.   id=&quot;value&quot;
  7.   required
  8. /&gt;
  1. trackBy(index: number): number {
  2.   return index;
  3. }

huangapple
  • 本文由 发表于 2023年6月12日 16:09:56
  • 转载请务必保留本文链接：https://go.coder-hub.com/76454685.html
  • angular
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定