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

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


angular validation html-table disabled-input
person Jeeten Parmar    schedule 11.09.2018    source источник
comment
Можете ли вы поделиться своим ts:   -  person Akj    schedule 11.09.2018
comment
можете ли вы рассказать об этом подробнее?   -  person Abhishek Ekaanth    schedule 11.09.2018
comment
Попробуйте заключить каждую строку <tr></tr> в тег <form>.   -  person Anuradha Gunasekara    schedule 11.09.2018
comment
@AnuradhaGunasekara Я уже пробовал, но он не показывает строку в браузере (Chrome и Mozilla).   -  person Jeeten Parmar    schedule 11.09.2018
comment
Можете ли вы создать для этого стекблиц?   -  person Anuradha Gunasekara    schedule 11.09.2018

Ответы (2)


arrow_upward
2
arrow_downward

Вместо использования 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>
person Abhishek Ekaanth    schedule 11.09.2018

arrow_upward
0
arrow_downward

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

<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>
person Bhumika Barad    schedule 11.09.2018