角度动态所需的输入不会影响 form.invalid 属性

Question

我有这些表单输入，这些输入是在单击按钮后使用*ngFor 生成的。 在这些输入中，我放置了required 属性，但似乎它不会影响form.invalid 我得到了其他不是动态生成的required inputs，当它们没有填充值时，提交按钮是disabled，正如我所希望的那样，所以我想问题是动态输入不存在，直到我点击按钮。

此外，我没有设法绑定这些输入，因为它们是动态的，我想在提交表单时获取它们的值并发送到服务。 任何建议如何做这样的事情？

编辑

我在component.ts 这个this.model.players = Array(this.model.numOfTeams*this.model.numOfPlayers).fill(new Result()) 中添加了我的模型对象 在我的 html 中，我添加了 ngModel 2way 绑定。现在验证工作正常，但是当我输入其中一个时，所有具有相同名称（例如 firstName）的字段都会一起更改。

这是我的component.html：

<div class="container">
    <form #newSearch="ngForm" class="form" ngNativeValidate>
        <div class="form-group pl-3">
            <fieldset name="generatePlayerCards">
                <legend>generatePlayerCards</legend>
                <p>Please choose <b>number of teams</b> and <b>number of players for each team</b>:</p>
                <input class="form-control mt-3" type="number" name="numOfTeams" id="numOfTeams" min="1" max="5" placeholder="Number of teams" [(ngModel)]="model.numOfTeams" required>
                <input class="form-control mt-3" type="number" name="numOfPlayers" id="numOfPlayers" min="1" max="20" placeholder="Number of players for each team" [(ngModel)]="model.numOfPlayers" required>
                <button class="btn btn-primary mt-3" type="button" (click)="generatePlayerCards()">Done</button>
            </fieldset>
        </div>
        <div class="card-group">
            <div *ngFor="let j of ngArr; let i = index; trackBy:trackByIndex;" class="col-4 mt-3">
                <div class="card">
                    <div class="card-header text-left"><h5>New Player Data</h5></div>
                    <div class="card-body">
                        <label for="firstName{{i}}"></label>
                        <input type="text" name="firstName{{i}}" class="form-control my-1 mr-sm-1" autocomplete="off" placeholder="First Name" required [(ngModel)]="model.players[i].firstName">
                        <label for="lastName{{i}}"></label>
                        <input type="text" name="lastName{{i}}" class="form-control my-1 mr-sm-1" autocomplete="off" placeholder="Last Name" required [(ngModel)]="model.players[i].lastName">
                        <label for="score{{i}}"></label>
                        <input type="text" name="score{{i}}" class="form-control my-1 mr-sm-1" autocomplete="off" placeholder="Score" required [(ngModel)]="model.players[i].score">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-3 mt-4">
            <button [disabled]="newSearch.form.invalid" class="btn btn-primary mr-2" type="submit" (click)="search()">Submit</button>
            <button class="btn btn-secondary" type="reset" (click)="resetForm()">Clear Form</button>
        </div>
    </form>
</div>

Answer 1

在 Angular 中，为了拥有动态字段和验证，最好使用 Form Array。

一开始可能看起来很复杂，但 Angular 中的响应式表单是一个令人难以置信的工具，它可以让您在未来毫不费力地获得出色的结果。 视频教程很多，这个是best imho。