переменная углового изменения после заполнения всех входных данных

Question

У меня есть несколько входов в шаблоне

<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">

в файле TS У меня есть переменная testVar=false;

Я хочу testVar=true после того, как оба ввода будут заполнены (не пустыми). Как я могу это сделать?

Answer 1

Вы можете использовать Реактивные формы следующим образом:

шаблон:

<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>

компонент:

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

И вместо использованияtestVar, вы можете использовать profileForm.valid.

Answer 2

Попробуйте так:

Шаблон:

<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;
    }
  }

Рабочая демонстрация

Answer 3

Вы можете использовать локальную ссылку здесь # input1 и # input2 и использовать 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)">

, а затем в файле .ts:

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