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

时间:2017-09-24 11:09:05

标签: angular angular2-template

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>

当用户在Firstname文本框中输入值时,应禁用其他文本框 当用户输入lastname ..firstname并且zipcode应该被删除 当用户在zipcode中输入值时,应该禁用第一个名称和姓氏

1 个答案:

答案 0 :(得分:1)

您唯一需要做的就是将代码中的内容直接应用到我们这里。

  

当用户在Firstname文本框中输入值时,应禁用其他文本框

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

你可以用类似的方式完成剩下的工作。并且不要忘记取消订阅。