コンボボックスの選択に従ってテキストボックスを有効にする

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たちは "ngmodels" をommited、どのような選択を呼び出すとして見てみましょう

<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> 

のようにする必要があります（formulario.controls [ 'SearchField']。値）

あなたのコンポーネントlikeである必要があります

.... 
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-モデル、および使用の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-disabled条件は、アクションを実行する値にする必要があります