Question

我有以下表格

      <form #myForm="ngForm" (ngSubmit)="registerUser(form)">
    <table class="table borderless">
        <tbody>

      <tr style="width: 100%">
        <td >
            <div class="form-group">
       <input type="radio" name="ffStatus" value="radio1" checked > radio1<br>
            </div>
      </td>


      <tr style="width: 100%">
        <td >
       <input type="radio" name="ffStatus" value="radio2"> radio2<br>
       </td>

      <td >
          <div class="form-group">
              <input type="text"  class="form-control" placeholder="DESTINATION" name="destination" [disabled]="true" required pattern="[A-Z|a-z]{3}">    
           </div>
      </td>
      </tr>


    </table>
    <table style="float:right;">
      <tr>
        <td>
          <button mat-button  class="btn btn-outline-success" (click) = "getProfile()" type="submit" >Submit</button>
        </td>
        <td>
            <button mat-button  class="btn btn-outline-success"  type="reset" (click)="clearValues()">Reset</button>
        </td>
      </tr>
    </table>
    </form>

我希望在单击radio1时无线电时禁用目标文本字段，并希望在其中填充一些文本并在单击无线电2时启用。

如何实现这一目标？

Answer 1

基本上你真正需要的是实现一个切换函数，只要单击单选按钮，它就会改变一个布尔类型变量。然后将此变量绑定到输入文本框的disabled属性。

这是简化的例子。

<强>模板：

<input type="radio" name="ffStatus" value="radio1" (click)="toggle()" checked /> radio1<br>
<input type="radio" name="ffStatus" value="radio2" (click)="toggle()" /> radio2<br>
<input type="text"  placeholder="DESTINATION" name="destination" [disabled]="textBoxDisabled" required pattern="[A-Z|a-z]{3}" />

ts代码：

  textBoxDisabled = true;

  toggle(){
    this.textBoxDisabled = !this.textBoxDisabled;
  }

以下是演示：

https://stackblitz.com/edit/angular-jgv9vb?embed=1

希望你觉得它有用。

如何在角度4中单击单选按钮时禁用文本字段

1 个答案: