根據組合框選擇啓用文本框

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禁用的條件應該是您想要執行此操作的值