Disable Only Button If Either Rows Empty Angular

Question

I have this 2 rows in 2 tables in angular that has only one submit button and i need help since I can only disable the submit button if the 2 rows in 2 tables are empty. How can i only disable the button if only 1 of the row is empty but the other one is not empty? <button type="submit" class="btn btn-primary float-right" [disabled]="!myForm.valid || myForm.controls.rows.length == 0">Save</button>

ts

this.myForm = this.fb.group({
      rows: this.fb.array([]),
      rows2: this.fb.array([])
    });

html

<form class="form-horizontal" [formGroup]="myForm" (ngSubmit)="onCreate()" >
    <div class="card-block" formArrayName="rows">
    <table>
    <tr *ngFor="let row of myForm.controls.rows.controls; let i = index" [formGroupName]="i">
    ....
    </table>
    </div>

    <div class="card-block" formArrayName="rows2">
    <table>
    <tr *ngFor="let row2 of myForm.controls.rows2.controls; let i2 = index" [formGroupName]="i2">
    ...
    </tr>
    </table>
    </div>
    <button type="submit" class="btn btn-primary float-right" [disabled]="!myForm.valid || myForm.controls.rows.length == 0">Save</button>
</form>

https://stackoverflow.com/a/43765804/5774939 Can you try this? — SDhaliwal, Oct 23 '17 at 23:36
I don't get it. Do you have only one button in your view for these two tables? And you want two disabled this button if in any of your arrays you have empty row? — Adam A, Oct 24 '17 at 01:09
Yes. I have only button for these two tables. Pls check again my updated codes above — , Oct 24 '17 at 01:13

score 0 · Answer 1 · answered Oct 24 '17 at 01:19

I am not sure is is the best solution but you can create simple flag in controller and function called after fetching data:

yourflag = false;
fun() {
for (let r of rows) {
if(r == '' || r == null) yourflag = true;
}
for (let r of row2s) {
if(r == '' || r == null) yourflag = true;
}
}

and in your button

<button type="submit" class="btn btn-primary float-right" [disabled]="yourFlag || !myForm.valid || myForm.controls.rows.length == 0">Save</button>

score 0 · Answer 2 · answered Oct 24 '17 at 01:32

0

[disable]="myForm.invalid || !myForm.controls.rows.length || !myForm.controls.rows2.length

answered Oct 24 '17 at 01:32

Christian

2,676
3
15
25

I think it is not good solution. What if array looks like this: ['ds','ds', '', 'ds'] – Adam A Oct 24 '17 at 01:41
You just chceck if array is empty not element of array is empty. – Adam A Oct 24 '17 at 01:48
This doesnt work. You have to fill out the 2 rows before the button the enabled – Oct 24 '17 at 04:05
Can you please elaborate your answer and provide an explanation to how it works? – GabrielOshiro Oct 24 '17 at 04:26

score 0 · Answer 3 · answered Oct 24 '17 at 04:46

0

This works for me. <button type="submit" class="btn btn-primary float-right" [disabled]="myForm.invalid || !myForm.controls.rows.length && !myForm.controls.rows2.length">Save</button>

answered Oct 24 '17 at 04:46

Disable Only Button If Either Rows Empty Angular

3 Answers3