当用户在一个文本框中输入值时，Angular 4禁用其他文本框答案

【问题标题】：Angular 4 Disable Other Textbox when user enter value in one textbox当用户在一个文本框中输入值时，Angular 4禁用其他文本框
【发布时间】：2017-09-24 11:09:04
【问题描述】：

import { Component } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
   userForm: any;
constructor(private formBuilder: FormBuilder) {

this.userForm = this.formBuilder.group({
  'Firstname':[{ value: '', disabled: false }],
  'Lastname':[{ value: '', disabled: false }],
  'Zipcode':[{ value: '', disabled: false }],
})

<form [formGroup]="userForm" >
  <label for="name">Name</label>
  <input formControlName="FirstName"  (change)="toogle()" />


  <label for="email">Email</label>
  <input formControlName="Lastname"  />


  <label for="profile">Profile Description</label>
  <textarea formControlName="Zipcode"></textarea>


  <button type="submit" >Submit</button>
</form>

当用户在名字文本框中输入值时，其他文本框应该被禁用当用户输入姓氏时..名字和邮政编码应该被禁用当用户在 zipcode..firstname 和 last name 中输入值时，应该禁用

【问题讨论】：

我是 formBuilder 和 forcontrolname .. 不使用 ngmodel
那么你尝试了什么，它到底有什么问题？

标签： angular angular2-template

【解决方案1】：

您唯一需要做的就是在代码中真正应用您向我们解释过的内容。

当用户在名字文本框中输入值时，其他文本框应该被禁用

this.userForm.get('FirstName').valueChanges
  .filter(x => x != null && x != '')
  .subscribe(() => {
    this.userForm.get('LastName').disable()
    this.userForm.get('Zipcode').disable()
  })

您可以以类似的方式完成其余的工作。并且不要忘记取消订阅。

【讨论】：