Angular表单无法通过ngModel与模型对象填充及控件类疑问

嗨，我来帮你搞定这两个Angular开发里的问题：

一、表单控件无法填充User对象初始值的问题 #

问题根源 #

你的User类构造函数只是接收了参数，但没有把这些参数转化为类的实例属性。当你创建new User(...)的时候，这个user对象其实根本没有username、email这些属性，[(ngModel)]自然绑定不到任何值，表单也就没法显示初始内容了。

解决办法 #

在构造函数的每个参数前加上访问修饰符（public/private/protected都行，这里用public最适合），Angular会自动把这些参数转为类的属性。修改后的user.ts如下：

export class User {
  constructor(
    public username: string,
    public email: string,
    public phone: number,
    public choice: string,
    public timePreference: string,
    public promotional: boolean
  ) {}
}

这样再创建user实例时，所有参数都会被赋值为对象的属性，[(ngModel)]就能正确绑定并显示初始值了。

二、关于{{name.class}}的疑问 #

1. 当前代码的问题 #

你现在的#name是DOM输入元素的引用，DOM元素的类属性是className而不是class，所以要写{{name.className}}才能拿到该元素的CSS类列表。

2. 查看Angular表单控件的状态类（如ng-valid/ng-touched） #

如果你的需求是查看Angular表单控件的状态类（不是单纯的DOM元素类），需要把模板引用变量和NgModel指令关联起来，修改输入框代码：

<input type="text" #name="ngModel" class="form-control" name="userName" [(ngModel)]="user.username">

之后你可以通过name.control访问控件的各种状态，比如：

• 查看控件是否被触摸过：{{name.control.touched}}
• 查看控件是否验证通过：{{name.control.valid}}
• 查看控件的所有状态类集合：{{name.control.classes | json}}

3. 是否仅适用于模型驱动表单？ #

完全不是，模板驱动表单同样支持这些控件状态属性，你完全可以在模板驱动表单里用这些API来获取控件状态，不用局限于响应式表单。

修改后的关键代码示例 #

user.ts #

export class User {
  constructor(
    public username: string,
    public email: string,
    public phone: number,
    public choice: string,
    public timePreference: string,
    public promotional: boolean
  ) {}
}

app.component.html（关键片段） #

<div class="form-group">
  <Label>Name:</Label>
  <input type="text" #name="ngModel" class="form-control" name="userName" [(ngModel)]="user.username">
</div>
<!-- 查看DOM元素的CSS类 -->
{{name.className}}
<!-- 查看Angular表单控件的状态类 -->
{{name.control.classes | json}}

这样修改后，你的表单就能正确显示初始值，也能顺利查看控件的类信息啦！

内容的提问来源于stack exchange，提问作者Gul Shair Butt