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

您可以通过以下方式使用Reactive Forms：

模板：

<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

您可以在此处＃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;
 }
}

Answer 3

尝试这样：

模板：

<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

填充所有输入后的角度变化变量

3 个答案: