如何通过输入数组验证按钮单击？答案

【问题标题】：How can i validade a button click through an array of inputs?如何通过输入数组验证按钮单击？
【发布时间】：2020-09-09 20:27:28
【问题描述】：

我有一个输入数组：

<div id="playerZone" *ngFor="let player of team;let i=index">
  <div id="buttonZone">
     <div class="buttonsAdd">
       <mat-form-field appearance="outline" #f="ngForm">
          <mat-label>Summoner Name</mat-label>
          <label>
             <input matInput placeholder="Placeholder" 
                (change)="updatePlayerSumonerName($event,i)">
          </label>
       </mat-form-field>
    </div>
</div>

<button mat-raised-button routerLink="/waiting" [disabled]="" (click)="placeOnTheList()" hidden="">Waiting Room</button>

还有一个我只想在所有输入都填满时启用的按钮，我不知道该怎么做。

我需要一些指导。

我可以创建在输入写入时变为 true 的变量，但我知道这是一种更好的方法

updatePlayerSumonerName(name,i){
    console.log(name.target.value);
    this.team[i].summonerName = name.target.value;
  }

【问题讨论】：

@ScottMarcus 从根的*ngFor 属性看起来像角度等等。
提供更多关于updatePlayerSumonerName函数的信息。那么只有一个人可以提供帮助
是的，它的角度
为你编辑的帖子
这似乎是一个FormArray 用例。

标签： javascript arrays angular forms validation

【解决方案1】：

你可以达到你的要求如下。

请查看Demo

在您的 app.component.ts 中，

    import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, FormArray, Validators, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  players = [
    'player1',
    'player2',
    'player3',
    'player4'
  ];

  constructor(private fb: FormBuilder) { }
  form = this.fb.group({
    team: new FormArray([])
  });

  ngOnInit() {
    this.addPlayers(this.players);
  }


  get team(): FormArray {
    return this.form.get('team') as FormArray;
  }

  onFormSubmit(): void {
    for (let i = 0; i < this.team.length; i++) {
      console.log(this.team.at(i).value);
    }
  }

  addPlayers(players: string[]): void {
    players.forEach(player => {
      this.team.push(new FormControl(player, [Validators.required]));
    });
  }


}

和 app.component.html，

<div class="container">
    <br>
    <form [formGroup]="form" (ngSubmit)="onFormSubmit()">
        <div formArrayName="team">
            <div class="form-group row">
                <label for="commessa" class="col-sm-2 col-form-label">Team</label>
                <div class="col-sm-10">
                    <ng-container *ngFor="let player of team.controls; index as idx">
                        <div class="row">
                            <div class="col-sm-8">
                                <input type="text" [ngClass]="{'error':player.invalid && player.touched}"
                                    [formControlName]="idx" class="form-control" id="commessa">
                            </div>
                        </div>
                    </ng-container>
                </div>
            </div>
        </div>
        <div>
            <button type="submit" class="btn btn-primary" [disabled]="form.invalid">Save</button>
        </div>
    </form>
</div>

【讨论】：