Angular 14使用ngModel时输入框初始值不显示，如何设置？

当你给输入框添加ngModel指令后，Angular会接管输入框的值管理，原生的value属性会被忽略，因此无法通过它设置初始值。以下是几种可行的解决方式：

• 组件类定义绑定变量并赋值
  这是最常用的双向绑定方案，在组件的.ts文件中定义对应变量并设置初始值，再通过[(ngModel)]绑定到输入框：
  组件代码：

  import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-your-component',
    templateUrl: './your-component.component.html'
  })
  export class YourComponent {
    name: string = 'John';
  }
  

  模板代码：

  <input type="text" [(ngModel)]="name" name="name">
  

• 使用单向绑定初始化
  如果不需要组件与输入框双向同步数据，直接用[ngModel]单向绑定设置初始值即可：

  <input type="text" [ngModel]="'John'" name="name">
  

• 结合响应式表单的FormControl
  若项目采用响应式表单，可通过FormControl设置初始值：
  组件代码：

  import { Component } from '@angular/core';
  import { FormControl } from '@angular/forms';
  
  @Component({
    selector: 'app-your-component',
    templateUrl: './your-component.component.html'
  })
  export class YourComponent {
    nameControl = new FormControl('John');
  }
  

  模板代码：

  <input type="text" [formControl]="nameControl" name="name">
  

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