Angular中如何基于组件属性条件设置input的type属性？

当然可以基于组件属性动态设置input的type属性，但你当前的写法存在几个关键问题需要调整，下面一步步给你解决：

1. 错误的指令：[ng-type]不存在 #

Angular中没有ng-type这个内置指令，要绑定原生HTML属性（比如input的type），直接使用属性绑定语法[type]="你的动态值"就可以，这是Angular绑定原生属性的标准方式。

2. 模板中不能直接使用typeof #

模板表达式的上下文是组件类，不能直接调用JavaScript全局的typeof操作符。你需要在组件类中定义一个方法，用来根据model[key]的类型返回对应的input type值。

比如在你的组件.ts文件中添加：

// 根据值的类型返回对应的input type
getInputType(value: any): string {
  const valueType = typeof value;
  
  // 这里可以根据业务需求映射类型，示例如下：
  switch(valueType) {
    case 'string':
      return 'text'; // 字符串对应文本输入框
    case 'number':
      return 'number'; // 数字对应数字输入框
    case 'boolean':
      return 'checkbox'; // 布尔值可以用复选框，或者你也可以用text
    default:
      return 'text'; // 默认文本类型
  }
}

3. 优化模板代码（减少重复） #

你当前的模板重复写了三次input，其实可以合并成一个，通过属性绑定来动态控制验证规则（比如required、minlength等），让代码更简洁：

<form #myForm="ngForm" (ngSubmit)="sendQuery()">
  <div *ngFor="let key of modelKeys">
    {{key}}
    <input 
      #myInput 
      [type]="getInputType(model[key])" 
      [name]="key" 
      placeholder="Enter {{key}} Here" 
      [(ngModel)]="model[key]" 
      appNoSpecialChars
      <!-- 动态设置验证规则 -->
      [required]="key === 'q'"
      [minlength]="key === 'stars' ? 2 : null"
      [maxlength]="key === 'stars' ? 4 : null"
    />
    <p *ngIf="!myForm.form.get(key)?.valid" >Not valid</p>
  </div>
  <button type="submit" [disabled]="!myForm.valid">Submit</button>
</form>

额外提示 #

如果你的model[key]初始值是undefined，typeof会返回'undefined'，这时候可以在getInputType方法里添加对这种情况的处理，比如默认返回'text'，或者根据业务逻辑返回其他类型。

内容的提问来源于stack exchange，提问作者Crowdpleasr