Show alert using a text box in Angular 6

Question

Show alert using a text box in Angular 6

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

When entering a number to a textbox I want you to send me an alert, but I have not been able to solve it, being equal to or greater than 30 you should send the alert

in html is my textbox code

<input
   type="number"
   min="0"
   id="obraAv"
   [value]="obraAv"
   (input)="Alert()"
   class="form-control"
   placeholder="Avance de la obra"
   required="required"/>

This is the message I want to show

<div *ngIf="showAlert" class="col-md-3 mb-2">
    <div class="alert alert-danger" ng-value="obraAv">
         <strong>Su obra civil no es asegurable</strong>
    </div>
</div>

and this is the code in ts

    showAlert=false;
  obraAv;
  Alert()
  {
      if(this.obraAv==30)
      {
          this.showAlert=true;
      }
      else{
          this.showAlert=false;
      }
  }

I would greatly appreciate your support

bootstrap angular

asked by Ricardo 05.06.2018 в 23:28

source

2 answers

0

You can use a [(ngModel)]="variable" to have the input variable in your component, so every time there is a change, you execute the Alert () function

answered by 06.06.2018 в 00:40

sInfo in puglin datatable does not work to show from n to n entries? How to fix an error "Could not determine generated file paths for Core Data ..." is in Xcode

score 0 · Accepted Answer

Try assigning a model to the input using ngModel and then detect the change of that model with the event ngModelChange :

<input
   type="number"
   min="0"
   id="obraAv"
   [value]="obraAv"
   ([ngModel])="obraInput"
   (ngModelChange)="obraChange()"
   class="form-control"
   placeholder="Avance de la obra"
   required="required"/>

Then in the code when the value of the input changes, we verify if it is greater than 30 and we show the alert, otherwise we hide it. Here the complete code:

@Component({
  selector: 'main-component',
   template: '
<input
       type="number"
       min="0"
       id="obraAv"
       [value]="obraAv"
       ([ngModel])="obraInput"
       (ngModelChange)="obraChange()"
       class="form-control"
       placeholder="Avance de la obra"
       required="required"/>

<div *ngIf="showAlert" class="col-md-3 mb-2">
    <div class="alert alert-danger" ng-value="obraAv">
         <strong>Su obra civil no es asegurable</strong>
    </div>
</div>

'})
export class MainComponent
{
   obraAv : String;
   showAlert : Boolean;
   obraChange()
   {
      showAlert = parseInt(obraAv) > 30);
   }
}