时间戳

首页 > 解决方案 > 检查所有控制表格

javascript - 检查所有控制表格

问题描述

我创建一个这样的formGroup

this.availableSigners = new FormGroup({
        nameSigner: new FormControl(),
        mailSigner: new FormControl()
});

在我的 html 组件中，我有这个

<div *ngFor="let signer of signers;  let i = index">
                    <div class="form-row">
<div class="card-body col-md-4" style="padding-top: 0.75rem !important">
    <b>{{signer.name}}  {{signer.surname}} 
    </b>&nbsp;
 </div>
 </div> 
 <div class="form-row" >      
     <div class="col-md-4">
           <ng-select #mailDocumentSelect 
                  formControlName="mailSigner" [items]="mails"
                  bindValue="code" bindLabel="description"  
                  (click)="getMails()">
            </ng-select>
  </div>
   <div class="col-md-4">
                                <ng-select>
                                </ng-select>
  </div>
                    </div>
                    <br>   
                </div>

其中 signers 是一个通过单击填充的列表，并创建一个选择邮件列表。

我的问题是我试图控制每个 mailSigner 的 formcontrolname 都有价值。

我创建了这个函数，该函数通过单击另一个按钮来调用

 getCompiledFeq(){

  if(this.availableSigners.get('mailSigner').value){
     return true;
  }
  return false;
 }

但是当只有一个选定的值（并且不控制每个表单控件）时，此控件返回 true。

如何控制每个选择表单的价值？

标签： javascriptangulartypescript

解决方案

您不能有多个具有相同名称的表单控件。

您可以使用索引来区分它们。

在您的 ts 文件中，您需要循环抛出所有签名者并为每个具有唯一 ID 的签名者添加一个控件，如下所示

   this.availableSigners = new FormGroup({
            nameSigner: new FormControl(),
            mailSigners: new FormArray()
    });

    for (let i = 0; i < signers.length; i++) {
             this.availableSigners.get('mailSigners').push('mailSigner-' + i , new FormControl('', Validators.required));
     }

并在您的 html 文件中更改formControlName为“mailSigner-{{i}}”以获得唯一索引

<div *ngFor="let signer of signers;  let i = index">
                    <div class="form-row">
<div class="card-body col-md-4" style="padding-top: 0.75rem !important">
    <b>{{signer.name}}  {{signer.surname}} 
    </b>&nbsp;
 </div>
 </div> 
 <div class="form-row" >      
     <div class="col-md-4">
           <ng-select #mailDocumentSelect 
                  formControlName="mailSigner-{{i}}" [items]="mails"
                  bindValue="code" bindLabel="description"  
                  (click)="getMails()">
            </ng-select>
  </div>
   <div class="col-md-4">
                                <ng-select>
                                </ng-select>
  </div>
                    </div>
                    <br>   
                </div>

推荐阅读