javascript - 检查所有控制表

Question

我这样创建一个 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 是否有值(value)。

我创建了这个通过点击另一个按钮调用的函数

 getCompiledFeq(){

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

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

我如何控制每个选择的表单都被赋值？

Answer 1

不能有多个同名的表单控件。

你可以用一个索引来区分它们。

在您的 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>