change a variable value using *ngIf in angular 7

ngif dynamic variable angular 6
ngif angular 8 example
ngif and condition
ng-if not equal
ngif variable
ngif not working
ngif not updating when variable changes
ng-template (ngif)

I am trying to add some validation using [pattern] in an angular 7 application. I want to disable a button using a variable this.isSubmitDisabled if the pattern has errors ( phoneNumber.errors?.pattern ).

I know that this can be achieved using Reactive form but unfortunately, I cannot use forms. Is there a way to set the variable value to 'true' if phoneNumber.errors?.pattern is true?.

Here is my code:

<input 
  type="text" 
  class="form-control" 
  (ngModelChange)="dialInDetailsChange($event)" 
  name="dialInDetails" 
  [disabled]="false" 
  id="dialInDetails" 
  pattern="^\d+(?:[,.]\d+)?$" 
  required 
  [(ngModel)]="agendaMeeting.dialInDetails" 
  ngModel #dialInDetails="ngModel" />

You can also check it using .match() in your .ts file. On model change just check whether the entered value matches your regex. If matches then set inputDisabled to false otherwise set inputDisabled to true.

let inputDisabled:boolean = false;
dialInDetailsChange(event:any){
  if(agendaMeeting.dialInDetails.match("^\d+(?:[,.]\d+)?$") === null){
    inputDisabled = true;
  }
  else{
    inputDisabled = false;
  }
}

Edit after recent comment

WORKING DEMO : LINK

myInput='';
result='';
  changeHandler(){
    if(this.myInput.match('^[\\s]+[a-zA-Z]*')  === null){
      this.result = "correct input";
    }
    else{
      this.result = "there are spaces at the begining."
    }
  }

NgIf, <div *ngIf="condition as value; else elseBlock">{{value}}</div> <ng-template When you do this, you can change which template to use at runtime, as In this case, you can use ngIf and store the result of the condition in a local variable as� Storing a conditional result in a variablelink. You might want to show a set of properties from the same object. If you are waiting for asynchronous data, the object can be undefined. In this case, you can use ngIf and store the result of the condition in a local variable as shown in the the following example.

How to use *ngIf else in Angular, Also, we will find out how the ngIf directive differs from using the "hidden" To invert the boolean value of a variable, we can use the not operator (!). What this directive does internally, is convert its content to regular binding. How to use *ngIf else in Angular. In this tutorial, we are going to take a look at the ngIf directive. We will discover how we can use it to show or hide parts of our angular application. Also, we will find out how the ngIf directive differs from using the "hidden" attribute.

try this :

<input 
  type="text" 
  class="form-control" 
  (ngModelChange)="updateState(phone)" 
  name="dialInDetails" 
  [disabled]="false" 
  id="dialInDetails" 
  pattern="^\d+(?:[,.]\d+)?$" 
  required 
  [(ngModel)]="agendaMeeting.dialInDetails" 
  #phone="ngModel" />    

<button type="button" [disabled]="isDisabled">Submit</button>


updateState(input){
    this.isDisabled = input.errors && input.errors.pattern ? true : false ;
  }

New Features for ngIf Starting with Angular 4, Namely, we can now define a template to use for an else clause, and we can assign a local variable that holds the resulting value of the if� Angular 9/8/7 Ngif Else is the not-so-simple version of conditional if else in Angular. Angular 9/8 ngif else allows you to switch between content from a conditional expression. As we have already mentioned, it is not as simple as you would assume. Angular ngif else is a far better version of regular if else since it comes with many helpful

Understanding *ngif directive & "*ngIf else then" in Angular, Angular's *ngIf directive displays or removes an element from DOM we should replace if else condition blocks with some html markup element something similar like below. <IfBlock value="display"> <div>Hi I am Visible</div> </IfBlock> To use the *ngif as variable in alternative then template or else� Use the async pipe with ngIf. We above example uses the async pipe with interpolation. We can also use it with the ngIf or ngFor etc. The following example shows how NOT to use the observable with ngIf directive. The condition (obsValue | async) becomes true, when the observable returns a value.

How to Use *ngIf else in Your Angular Applications, A quick tutorial on how to use the *ngIf else directive in Angular to perform comparisons in These entities can be variables or array items. includes a template based on the value of an expression coerced to Boolean. Modify your your comparisons.component.html file with this newer version below:. First, we are using a traditional *ngIf in combination with the async pipe to show our element if the user has loaded. Next is the user$ | async as user statement in the *ngIf. Here we are creating a local template variable user that Angular assigns the value from the Observable user$.

Ng-If, Ng-If examples, Ng-If Angular example, Ng-If use in Angular, best examples of Ng-If of isColorpicker variable with ng-model directive which will set the value of� Is there a way to use ng-if to test if a variable is defined, not just if it's truthy? In the example below ( live demo ), the HTML displays a shipping cost for the red item only, because item.shipping is both defined and nonzero.

Comments
  • Thanks for your help Himanshu, I used your logic and got it to work. I have removed the pattern from HTML and am only using regex in the ts file. I am looking for a regex to allow everything except blank spaces at the start of the input and I am using ^\s*$ for that. Unfortunately something is not working. Here is my condition if (this.agendaMeeting.dialInDetails.match(/^\s*$/g) === null) { this.isSubmitDisabled = true; };