I'm trying to generate form control dynamically in angular forms & i'm facing that error in console "TypeError: feature_r5.get is not a function"

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

I'm trying to generate form control dynamically in angular forms & i'm facing that error in console "TypeError: feature_r5.get is not a function"

问题

  1. <div id="features" class="tab-pane mytab-pane">
  2.     <div class="form-group">
  3.         <button type="button" class="btn btn-primary" (click)="addFeatureButtonClick()">添加</button>
  4.     </div>
  6.     <div formArrayName="features" *ngFor="let feature of advForm.get('features')?.value; let i = index">
  7.         <div attr.formGroupName="{{i}}">
  8.             <div class="form-group" [ngClass]="{'has-error' : feature.get('fName').invalid &&
  9.                                                                feature.get('fName').touched}">
  10.                 <div class="input-group">
  11.                     <span class="input-group-prepend">
  12.                         <label class="input-group-text"><strong>特性</strong></label>
  13.                     </span>
  14.                     <input type="text" id="{{'fName'+i}}" name="fName" class="form-control" placeholder="特性"
  15.                         formControlName="fName"/>
  16.                 </div>
  17.                 <span class="help-block" *ngIf="feature.get('fName').errors.required &&
  18.                                                     feature.get('fName').touched">
  19.                     特性是必填项
  20.                 </span>
  21.             </div>
  22.         </div>
  23.     </div>
  24. </div>
英文:

I'm trying to generate form controls dynamically on click of a button in Angular v14 html template i generate it but i'm facing that error in console.

  1. ERROR TypeError: feature_r5.get is not a function
  2.  at PostAdvComponent_div_40_Template

Html template code

  1. <div id="features" class="tab-pane mytab-pane">
  2.             <div class="form-group">
  3.                 <button type="button" class="btn btn-primary" (click)="addFeatureButtonClick()">Add</button>
  4.             </div>
  6.             <div formArrayName="features" *ngFor="let feature of advForm.get('features')?.value; let i = index">
  7.                     <div attr.formGroupName="{{i}}">
  8.                         <div class="form-group" [ngClass]="{'has-error' : feature.get('fName').invalid &&
  9.                                                                            feature.get('fName').touched}">
  10.                             <div class="input-group">
  11.                                 <span class="input-group-prepend">
  12.                                     <label class="input-group-text"><strong>Features</strong></label>
  13.                                 </span>
  14.                                 <input type="text" id="{{'fName'+i}}" name="fName" class="form-control" placeholder="Features"
  15.                                     formControlName="fName"/>
  16.                             </div>
  17.                             <span class="help-block" *ngIf="feature.get('fName').errors.required &&
  18.                                                             feature.get('fName').touched">
  19.                                 Feature is required
  20.                             </span>
  21.                         </div>
  22.                     </div>
  23.             </div>
  24.         </div>

答案1

得分: 0

Sure, here are the translated parts:

  1. 不要遍历值（否则当您更改输入时，Angular 会重新绘制，您会失去焦点）：

    *ngFor="let feature of advForm.get('features')?.value;.." //<--WRONG

    您需要使用一个 "getter"

    1. get featureFormArray()
    2. {
    3.    return this.form.get('features') as FormArray
    4. }

    并遍历 "controls"

    *ngFor="let feature of featureFormArray.controls;.." //<--OK

  2. formGroupName 不是 属性，而是指令，所以

    1. <div attr.formGroupName="{{i}}"> //<--WRONG
    2. <div [formGroupName]="i"> //<---OK

  3. 当管理 formArray 的 formGroup 时，我更喜欢使用这种结构
    （formArrayName 在循环外部，循环中相同的标记，formGroupName）：

    1. <form [formGroup]="form">
    2.    <div formArrayName="features">
    3.       <div *ngFor="let feature of featuresFormArray.controls;let i=index"
    4.                    [formGroupName]="i">
    5.          ...您的输入..
    6.          <input formControlName="fName">
    7.       </div>
    8.    </div>
    9. </form>

  4. 在 .get 后面您需要使用安全操作符（请参阅点之前的 ?），否则您会出现 "可能为 null 或未定义" 的错误

    1. feature.get('fName')?.invalid && feature.get('fName')?.touched

  5. 在检查 errors.required 时同样如此

    *ngIf="feature.get('fName')?.errors?.required

英文:

  1. Not iterate over the values (else when you change an input, Angular redraw and you loose the focus):

    1. *ngFor=&quot;let feature of advForm.get(&#39;features&#39;)?.value;..&quot; //&lt;--WRONG

    You need use a "getter"

    1. get featureFormArray()
    2. {
    3.    return this.form.get(&#39;features&#39;) as FormArray
    4. }

    and iterate over "controls"

    1. *ngFor=&quot;let feature of featureFormArray.controls;..&quot; //&lt;--OK

  2. formGroupName is not an attribute, else a directive, so

    1. &lt;div attr.formGroupName=&quot;{{i}}&quot;&gt; //&lt;--WRONG
    2. &lt;div [formGroupName]=&quot;i&quot;&gt; //&lt;---OK

  3. When manage fromGroup of formArray I like more use this structure
    (the formArrayName outside the loop, the same tag in loop, the
    formGroupName):

    1. &lt;form [formGroup]=&quot;form&quot;&gt;
    2.    &lt;div formArrayName=&quot;features&quot;&gt;
    3.       &lt;div *ngFor=&quot;let feature of featuresFormArray.controls;let i=index&quot;
    4.                    [formGroupName]=&quot;i&quot;&gt;
    5.          ...yours inputs..
    6.          &lt;input formControlName=&quot;fName&quot;&gt;
    7.       &lt;/div&gt;
    8.    &lt;/div&gt;
    9. &lt;/form&gt;

  4. You need use the safe operator (see the ? before the dot) after the
    .get else you have an error of "possible null or undefined"

    1. feature.get(&#39;fName&#39;)?.invalid &amp;&amp; feature.get(&#39;fName&#39;)?.touched

  5. Same before when you check errors.required

    1. *ngIf=&quot;feature.get(&#39;fName&#39;)?.errors?.required

huangapple
  • 本文由 发表于 2023年5月22日 10:43:49
  • 转载请务必保留本文链接：https://go.coder-hub.com/76302761.html
  • angular
  • angular14
  • javascript
  • user-interface
匿名

发表评论

匿名网友

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

确定