动态表 tr angular 5 的表单验证答案

【问题标题】：Form validation for dynamic table tr angular 5动态表 tr angular 5 的表单验证
【发布时间】：2019-02-15 13:05:15
【问题描述】：

我有动态的table tr，每一行都包含一个提交按钮。我还动态应用了input 控件名称。根据tr 行验证启用/禁用按钮的最佳方法是什么？

<form #form1="ngForm">
<table>
<thead><tr><th>Name</th><th>Email</th><th>Action</th></tr></thead>
<tbody>
<tr *ngFor="let value of data; let i=index">
<td><input type="text" name="name{{i}}" #nameInput="ngModel" [(ngModel)]="dataModel.name" [value]="value.name" required /></td>
<td><input type="text" name="email{{i}}" #emailInput="ngModel" [(ngModel)]="dataModel.email" [value]="value.email" required /></td>
<td><button type="submit" [disabled]="form1.form.invalid">Submit</button></td>
</tr>
</tbody>
</table>
</form>

这里，[disabled] 以上条件适用于所有行，但我想根据每一行应用它。

【问题讨论】：

你能分享你的ts吗：
你能分享更多关于它的代码吗？
尝试用<form>标签包装每一行<tr></tr>。
@AnuradhaGunasekara 我已经尝试过了，但它没有在浏览器（Chrome 和 Mozilla）中显示行。
你能为此创建一个堆栈闪电战吗？

标签： angular validation html-table disabled-input

【解决方案1】：

我使用反应形式的表单数组做到了这一点，可能对您有所帮助。下面附上链接 enter link description here

<button (click)="addbutton()">Add</button>
<ul [formGroup]="formName" class="listTable">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Name</th>
                <th>description</th>
                <th>Action</th>
            </tr>
        </thead>
    </table>
    <ul formArrayName="items" class="listTable">
        <li *ngFor="let value of formName.get('items').controls; let ix = index">
            <form [formGroupName]="ix">
                <table class="table table-striped">
                    <tbody>
                        <tr>
                            <td>
                                <input type="text" formControlName="name"  required/>
                            </td>
                            <td>
                                <input type="text" formControlName="description"  required/>
                            </td>
                            <td>
                                <button type="submit" class="btn btn-primary" [disabled]="value.invalid">Submit</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </li>
    </ul>
</ul>

【讨论】：

【解决方案2】：

我建议你使用 FormGroup，而不是使用 ngModel。

TS

public form1: FormGroup;
ngOnInit(){
this.form1 = this.fb.group({});
}

获得数据后，您可以进行表单验证。

for(index i = 0 ; i < resDeta.length ; index++){
 if (resDeta.req === 'TRUE') {
const control: FormControl = new FormControl(null, Validators.required);
 this.form1.addControl(resDeta[index].name, control);
}else{
  const control: FormControl = new FormControl(null);
  this.form1.addControl(props.name, control);
}
}

HTML

    <form [formGroup]="form1" (ngSubmit)="Submit(form1)">
    <table>
    <thead><tr><th>Name</th><th>Email</th><th>Action</th></tr></thead>
    <tbody>
    <tr *ngFor="let prop of resDeta; let i=index">
    <td><input type="text" [formControlName]="prop.name" [id]="prop.name" [name]="prop.name" placeholder="Enter {{prop.label}}" class="form-control" [attr.maxlength]="prop.length" [value]="prop.name"></td>

<td><input type="text" [formControlName]="prop.name" [id]="prop.name" [name]="prop.name" placeholder="Enter {{prop.label}}" class="form-control" [attr.maxlength]="prop.length" [value]="prop.email"></td>

    <td><button type="submit" [disabled]="!form1.valid">Submit</button></td>
    </tr>
    </tbody>
    </table>
    </form>

【讨论】：