Проверка формы для динамической таблицы tr angular 5 - PullRequest
Новая
       6

Проверка формы для динамической таблицы tr angular 5

0 голосов
/ 11 сентября 2018

У меня есть динамический 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] условие применяется ко всем строкам, но я хочу применить его на основе каждой строки.

Ответы [ 2 ]

0 голосов
/ 11 сентября 2018

Я сделал это, используя массив форм в реактивной форме, может быть, это помогает вам. прикрепленная ссылка ниже введите описание ссылки здесь 

<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>
0 голосов
/ 11 сентября 2018

Вместо использования ngModel я бы предложил вам использовать FormGroup.

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>
...