angular 动态要求的输入不影响 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 中的 Reactive 表单是一个令人难以置信的工具，可以让您在未来毫不费力地取得很好的成果。视频教程很多，这个是best imho.

angular 动态要求的输入不影响 form.invalid 属性

angular dynamic required inputs doesn't affect form.invalid property

javascript

html

angular

ngfor