CODEWITHSUNDEEP
angularangular6angular-reactive-forms
slevin
slevin

Reputation: 3888

Disable submit button according to ngIf in the same angular form

I am using Angular 6 and I created a reactive form. This is the form here 

<form [formGroup]="myForm" (ngSubmit)="myFormSubmit()">
            <div formGroupName = "showNameGroup">  
                <label>
                    <input type="text" formControlName="showName"  >
                  </label>
            </div> 
             <div *ngIf='results | async ; let items '> 
                <div *ngFor='let item of items'>
                  <div *ngIf='item.name != currentPoint.name'>
                     {{item.name}} already exists. You cannot submit until you change the name
                     <!-- also disable submit somehow -->
                  </div>                               
                </div>                  
             </div>

             <select formControlName="showType">
                <option *ngFor='let item of showTypeData' value="{{item.id}}" >{{item.name}}</option>
             </select>

            <button type="submit">Submit</button>
</form>

The results is updated as I type in the form's textfield

So, every time the <div *ngIf='item.name != currentPoint.name'> part is true I would also like to disable the submit some how. How can I do this?

Thank you

Upvotes: 3

Views: 5048

Answers (2)

Martin Parenteau
Martin Parenteau

Reputation: 73721

You can detect the presence of the div elements, and disable the button if any of them is present in the view. To detect these elements, set a template reference variable on them:

<div #existingItem *ngIf="item.name !== currentPoint.name">

and monitor the presence of the elements with ViewChildren and QueryList. A flag can be set if at least one element is present in the view.

@ViewChildren("existingItem") existingItems: QueryList<ElementRef>;
public disabledButton = false;

constructor(private changeDetector: ChangeDetectorRef) {}

ngAfterViewInit() {
  // Check if an element is initially present
  this.disabledButton = this.existingItems.length > 0;
  this.changeDetector.detectChanges();

  // Monitor the addition/removal of elements
  this.existingItems.changes.subscribe((existingItems) => {
    this.disabledButton = existingItems.length > 0;
    this.changeDetector.detectChanges();
  });
}

Finally, the button is disabled if the flag is set:

<button type="submit" [disabled]="disabledButton">Submit</button>

See this stackblitz for a demo.

Upvotes: 2

Ayoub k
Ayoub k

Reputation: 8868

<form [formGroup]="myForm" (ngSubmit)="myFormSubmit()">
    <div formGroupName = "showNameGroup">  
        <label>
            <input type="text" formControlName="showName"  >
        </label>
    </div> 
    <div *ngIf='results | async ; let items '> 
        <div *ngFor='let item of items'>
            <div *ngIf="!checkItem(item.name, currentPoint.name)">
                {{item.name}} already exists. You cannot submit until you change the name
                     <!-- also disable submit somehow -->
            </div>                               
        </div>                  
    </div>
    <select formControlName="showType">
        <option *ngFor='let item of showTypeData' value="{{item.id}}" >{{item.name}} </option>
    </select>
    <button type="submit" [disabled]="!check">Submit</button>
</form>

ts:
add the following in your ts: 

check: boolean = true;
checkItem(item.name, currentPoint.name): boolean {
    if(item.name != currentPoint.name) {
        check = false;
        return false;
    }
    else {
        check = true;
        return true;
    }
}

Upvotes: 1

Related Questions