角度-如何更改文本输入状态

Question

我正在将Angular-7用于我的Web应用程序。详细视图如下所示：

 <div class="col-xs-4">
    <div class="form-group">
      <label for="responded">Quote Status</label>
      <input type="text" class="form-control" id="responded" name="responded" readonly [(ngModel)]="data.responded"/>
    </div>
 </div>

从上面的代码中，当 data.responded 为0时，应显示不活动；为1时，应显示活动。

如何在文本输入中实现这一目标？

Answer 1

如Chellappan在评论中建议的那样，使用disabled属性来实现。

在这里，尝试一下：

<div class="col-xs-4">
  <div class="form-group">
    <label for="responded">Quote Status</label>
    <input 
      type="text" 
      [disabled]="data.responded == 0" 
      class="form-control" 
      id="responded" 
      name="responded"
      [(ngModel)]="data.responded" />
  </div>
</div>

或者，如果您不希望禁用它，也可以将readonly属性设置为条件：

<div class="col-xs-4">
  <div class="form-group">
    <label for="responded">Quote Status</label>
    <input 
      type="text" 
      [readonly]="data.responded == 0"
      class="form-control" 
      id="responded" 
      name="responded"
      [(ngModel)]="data.responded" />
  </div>
</div>

---

  

这是您推荐的Working Sample StackBlitz。

Answer 2

我假设您希望Quote输入字段的值根据data.responded的值进行更改。如果是这样，则可以使用三元运算符将其绑定到输入字段的value属性：

<div class="col-xs-4"> <div class="form-group"> <label for="responded">Quote Status</label> <input type="text" class="form-control" id="responded" name="responded" readonly [value]="!!data.responded ? 'Active' : 'Inactive'"/> </div> </div>

Answer 3

为此，您可以将[value]指令与ternary conditional operator组合使用

<input type="text" class="form-control" id="responded" name="responded"
               readonly [value]="data.responded === 0? 'Inactive': 'Active'"/>

  

Working Stackblitz demo