如果我得到“匹配”的字符串值，我将如何禁用其他输入字段我在第一个输入字段Angular中传递

Question

我正在使用模板驱动的表单，如果其他输入字段与我正在输入的相同字符串匹配，我需要禁用其他输入字段。例如，如果第一个输入值是“sample”，那么其他输入应该被禁用。

<input 
  type="text" 
  name="sample" 
  [(ngModel)]="sample" 
  #sample=ngModel 
  required="true" />

<input 
  type="text" 
  name="sample1" 
  [(ngModel)]="sample1" 
  #sample1=ngModel 
  required="true" 
  [disabled]="sample.value==sample" />

请告诉我如何实现这一目标，我试图使用禁用但我不明白我该怎么做。

Answer 1

我认为在这些输入（#sample和#sample1）上放置模板变量并在你已经使用ngModel时分配它们[(ngModel)]是多余的。你将获得属性sample和sample1的所有内容。所以你可以摆脱这些模板变量#sample和#sample1。

但是，当您填充sample的值然后清空它时，简单地执行此操作将不起作用。在这种情况下，第二个输入仍将被禁用。

这似乎是Angular的一个错误。不确定。作为解决方法，您可以在Component Class中添加另一个属性，该属性记录sample和sample1的更改值，然后禁用/启用sample1文本字段。这是如何做：

模板：

<input 
  type="text" 
  name="sample" 
  [(ngModel)]="sample"
  required="true"
  (change)="shouldBeDisabled()" />

<br><br>

<input 
  type="text" 
  name="sample1" 
  [(ngModel)]="sample1"
  required="true" 
  (change)="shouldBeDisabled()"
  [disabled]="shouldInputBeDisabled" />

组件类：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {
  sample;
  sample1;
  shouldInputBeDisabled;

  shouldBeDisabled() {
    this.shouldInputBeDisabled = this.sample !== '' && this.sample === this.sample1;
  }

}

这是一个Sample StackBlitz。

此外，由于还需要以下输入，如果对提交按钮进行了验证，您可能无法提交表单。在这种情况下做必要的事情。