根据组合框选择启用文本框

Question

我想根据组合框选择启用/禁用文本框...如果选择value=""，我希望内容文本框是禁用。我尝试了很多东西，但没有任何工作... 任何想法，如何我可以解决这个问题？

<form method="post" class="form-horizontal" [formGroup]="formulario"> 
    <div class="form-group row"> 
     <label class="control-label col-md-3 text-right" for="SearchField">Field:</label> 
     <div class="col-sm-3 col-md-3"> 
     <select formControlName="SearchField" class="form-control" (change)="choice(searchField.value)" #searchField> 
      <option value="" selected disabled>Pick a Choice</option> 
      <option value="1">Choice 1</option> 
      <option value="2">Choice 2</option> 
      <option value="3">Choice 3</option> 
      <option value="4">Choice 4</option> 
      </select> 
     </div> 
    </div> 

    <div class="form-group row"> 
     <label class="control-label col-md-3 text-right" for="ContentField">Content:&nbsp;</label> 
      <div class="col-sm-3 col-md-3"> 
      <input type="text" class="form-control" formControlName="ContentField" [textMask]="mask" [(ngModel)]="search" placeholder="{{ this.searchKind }}" #docField /> 
      </div> 
    </div> 

Answer 1

您有混合的ReactiveForm和模板驱动器表单 - >坏主意。 使用ReactiveForms，您必须使用disable（）和enable（）方法。

您component.html必须像

<form method="post" class="form-horizontal" [formGroup]="formulario"> 
    <div class="form-group row"> 
    <label class="control-label col-md-3 text-right" for="SearchField">Field:</label> 
    <div class="col-sm-3 col-md-3"> 
     <select formControlName="SearchField" class="form-control" (change)="choice(formulario.controls['SearchField'].value)" #searchField > 
     <option value="" selected>Pick a Choice</option> 
     <option value="1">Choice 1</option> 
     <option value="2">Choice 2</option> 
     <option value="3">Choice 3</option> 
     <option value="4">Choice 4</option> 
     </select> 
    </div> 
</div> 
<div class="form-group row"> 
    <label class="control-label col-md-3 text-right" for="ContentField">Content:&nbsp;</label> 
     <div class="col-sm-3 col-md-3"> 
      <input type="text" class="form-control" formControlName="ContentField" #docField /> 
     </div> 
    </div> 

看看，因为我们中省略 “ngmodels”，以及如何调用选择（formulario.controls [ 'SearchField']。值）

你的组件必须像

.... 
ngOnInit() { 
    this.formulario = this.fb.group({ 
     SearchField:null, 
     ContentField: [{value:null,disabled:true}] //at first is disabled 
    }); 
} 
choice(value:any) 
{ 
    //use diabled() and enabled() 
    if (!value) 
     this.formulario.controls['ContentField'].disable(); 
    else 
     this.formulario.controls['ContentField'].enable(); 
} 

看看我们如何使残疾人开始。

或者你可以在netbasal's blog

//Directive from https://netbasal.com/disabling-form-controls-when-working-with-reactive-forms-in-angular-549dd7b42110 
import { NgControl } from '@angular/forms'; 
@Directive({ 
    selector: '[disableControl]' 
}) 
export class DisableControlDirective { 
    @Input() set disableControl(condition : boolean) { 
    if (condition) 
     this.ngControl.disable(); 
    else 
     this.ngControl.enable(); 
    } 

    constructor(private ngControl : NgControl) { 
    } 
} 

Answer 2

可以使用NG-模型这个

<form method="post" class="form-horizontal" [formGroup]="formulario"> 
<div class="form-group row"> 
    <label class="control-label col-md-3 text-right" for="SearchField">Field:</label> 
    <div class="col-sm-3 col-md-3"> 
    <select formControlName="SearchField" class="form-control" (change)="choice(searchField.value)" #searchField ng-model="selectVal"> 
     <option value="" selected disabled>Pick a Choice</option> 
     <option value="1">Choice 1</option> 
     <option value="2">Choice 2</option> 
     <option value="3">Choice 3</option> 
     <option value="4">Choice 4</option> 
     </select> 
    </div> 
</div> 

<div class="form-group row"> 
    <label class="control-label col-md-3 text-right" for="ContentField">Content:&nbsp;</label> 
     <div class="col-sm-3 col-md-3"> 
     <input type="text" class="form-control" ng-disabled="selectVal==''" formControlName="ContentField" [textMask]="mask" [(ngModel)]="search" placeholder="{{ this.searchKind }}" #docField /> 
     </div> 
</div> 

在这里，你可以指定一个NG-模型下拉，并使用NG-禁用在文本框中。 ng禁用的条件应该是您想要执行此操作的值