angular change variable after filling all inputs

Question

I have several inputs in template

<input type="text" class="form-control" name="name" id="name" placeholder="name" title="nanme">
<input type="text" class="form-control" name="surname" id="name" placeholder="surname" title="surname">

in ts file I have variable testVar=false;

I want testVar=true after both inputs will be filled (not empty). How can I do this ?

NikNik · Accepted Answer · 2019-10-04 09:29:44Z

1

You can use Reactive Forms in this way:

template:

<div [formGroup]="profileForm">
      <input formControlName="name" type="text" class="form-control" name="name" id="name" placeholder="name" title="nanme">
      <input formControlName="surname" type="text" class="form-control" name="surname" id="name" placeholder="surname" title="surname">
     <p>
        {{profileForm.status}}
    </p>
</div>

component:

import {Validators, FormBuilder} from '@angular/forms';
profileForm = this.fb.group({
    name: ['', Validators.required],
    surname: ['', Validators.required]
});
constructor(private fb: FormBuilder) { }

And instead of using testVar, you can use profileForm.valid.

answered Oct 4, 2019 at 9:29

NikNik

2,3012 gold badges18 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mateusz · Accepted Answer · 2019-10-04 07:48:15Z

0

You can use local reference here #input1 and #input2 and make use of keydown.enter

<input type="text" class="form-control" name="name" id="name" placeholder="name" title="nanme" #input1 (keydown.enter)="checkInputs(input1.value,input2.value)">
<input type="text" class="form-control" name="surname" id="name" placeholder="surname" title="surname" #input2 (keydown.enter)="checkInputs(input1.value,input2.value)">

and then in .ts file:

checkInputs(input1,input2) {
  if(input1.length && input2.length){
  this.testVar=true;
  }else{
  this.testVar=false;
 }
}

answered Oct 4, 2019 at 7:48

Mateusz

1,1932 gold badges15 silver badges28 bronze badges

Comments

Adrita Sharma · Accepted Answer · 2019-10-04 07:58:43Z

0

Try like this:

Template:

<input type="text" class="form-control" name="name" id="name" placeholder="name" title="nanme" [(ngModel)]="details.name" (ngModelChange)="checkTestValue()">
<input type="text" class="form-control" name="surname" id="name" placeholder="surname" title="surname" [(ngModel)]="details.surname" (ngModelChange)="checkTestValue()">

TS:

 details: any = {};

  checkTestValue() {
    if (this.details.name && this.details.surname) {
      this.testVar = true;
    } else {
      this.testVar = false;
    }
  }

Working Demo

answered Oct 4, 2019 at 7:58

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

2 Comments

Hemendra Over a year ago

User has mentioned in the question that template has several inputs, not just two. Also not necessarily all the input values can belong to one variable object, which is 'details' in your case.

Adrita Sharma Over a year ago

@Hemendra In that case hecan use Object.keys()

Collectives™ on Stack Overflow

angular change variable after filling all inputs

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related