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

您可以将ng-model用于此

<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-model，并在文本框中使用ng-disabled。 ng-disabled条件应该是您要执行操作的值

Answer 2

您有混合ReactiveForm和模板驱动器表单 - ＆gt;馊主意。使用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']。value）

您的组件必须像

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

中使用show这样的指令

 //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 ) {
  }
}

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

2 个答案: