как отключить другое поле ввода, если я получаю "совпавшее" строковое значение, которое я передаю в 1-е поле ввода Angular

Question

Я использую управляемую шаблоном форму, и мне нужно отключить другое поле ввода, если другое поле ввода совпадает с той же строкой, что и я. например, 1-е значение ввода, если оно = "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. Не уверен в этом. В качестве обходного пути вы можете добавить другое свойство в свой класс компонентов, которое записывает измененные значения 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;
  }

}

Вот Образец StackBlitz .

Кроме того, поскольку также требуется ввод данных ниже, вы не сможете отправить форму, если на кнопке отправки есть проверка. Сделай все необходимое в этом случае.