在 angular 模板驱动表单中，仅使用 `[value]` 单向绑定无法让 `ngmodel` 正确跟踪控件状态，导致提交时值为空、`ng-invalid` 类残留等问题；应改用 `[(ngmodel)]` 双向绑定确保模型与视图同步。
Angular 的模板驱动表单依赖 ngModel 指令建立控件与组件属性之间的双向数据流。当你使用 [value]="accountUsername" 时，仅将初始值写入 DOM 输入框，但 ngModel 并未真正“接管”该控件的值管理——它无法监听后续变化（包括初始化赋值），因此表单控件的状态（如 valid、dirty、touched）和 form.value 均无法正确反映实际内容。
正确的做法是使用双向绑定语法 [(ngModel)]，它等价于 [ngModel]="accountUsername" (ngModelChange)="accountUsername = $event"，既同步初始值，又响应用户输入并自动更新模型：
<form #accountForm="ngForm" (ngSubmit)="onSubmit()">
<label for="username">Username</label>
<input
type="text"
id="username"
name="username"
[(ngModel)]="accountUsername"
required>
<button type="submit">Submit</button>
</form>同时，建议优化组件逻辑：
- ✅ 移除 @ViewChild('accountForm') 的手动引用（除非需调用 reset() 等方法），因 ngForm 已通过 #accountForm="ngForm" 提供了模板引用变量；
- ✅ 将 HTTP 请求逻辑与表单初始化解耦，避免 ngAfterViewInit 中异步赋值引发的竞态问题（如表单提前提交）；可考虑在 ngOnInit 中发起请求，并结合 *ngIf="accountUsername != null" 延迟渲染表单，确保数据就绪后再挂载表单控件；
- ✅ 添加 name 属性（已存在）和 required 验证器（已存在）后，ng-invalid 类会在初始无值时出现；而 [(ngModel)] 绑定后，一旦 accountUsername 被赋值（如 'john_doe'），控件立即变为 valid，ng-invalid 自动移除。
最终，onSubmit() 中打印的 this.accountForm.value 将准确输出 { username: 'actual-value' }，且验证状态与 UI 表现完全一致。这是 Angular 模板驱动表单的标准实践，也是确保数据流可控、验证可靠的基础。
