Angular中带有ngModel和多个字段的自定义组件答案

【问题标题】：Custom Component in Angular with ngModel and multiple fieldsAngular中带有ngModel和多个字段的自定义组件
【发布时间】：2020-01-12 23:23:15
【问题描述】：

假设我想在 Angular 2+ 中为以下类创建一个自定义组件

public class user {
    name: string;
    id: number;
    address: string;
}

我创建了一个自定义组件

<input [(ngModel)]="name" />
<input [(ngModel)]="id" />
<input [(ngModel)]="address" />

我已将此自定义组件添加到我的主页中

<user-component></user-component>

我现在要做的是在我的自定义组件中将 User 类作为 ngModel 传递，并将其与我的主页类中的 public user:User 变量绑定。像这样的

<user-component [(ngModel)]="user"></user-component>

我发现很少有使用ControlValueAccessor, NG_VALUE_ACCESSOR 的示例，但所有这些示例都适用于单个组件，例如一个文本输入。有没有办法让它也适用于自定义组件内的多个输入？

【问题讨论】：

【解决方案1】：

实现这一点的方法是在 UserComponent 上使用@Input

export class UserComponent {
  @Input() user: User;
}

然后绑定到你在父模板中声明的输入

<user-component [user]="user"></user-component>

现在这只是一种方式，输入到 UserComponent，

要使其像 ngModel 一样以两种方式工作，您需要添加输出 EventEmiter 如下

export class UserComponent {
  @Input() user: User;
  @Output('userChange') emitter: EventEmitter<User> = new EventEmitter<User>();
}

请注意，用户更改关键字在这里很重要，以使其发挥作用。

只有这样你才能编写双向绑定

<user-component [(user)]="user"></user-component>

另外，只需用谷歌搜索，我就可以在同一主题上找到这个也很好的 SO 答案custom-input-and-output-on-same-name-in-angular2-2-way-binding

【讨论】：

正如每个人都指出的那样，使用 angular.io/guide/reactive-forms#grouping-form-controls 内部带有 FormControls 的 FormGroup 是一个很好的救生员
如果我使用响应式表单，我会得到双向数据绑定吗？
反应式表单有助于管理输入的值和有效性。例如，您可以订阅 FormControls 更改事件。您仍然需要组件上的输入输出来通知父组件。
@Simplicity's_Strength，是一个对象，它不是必需的@Output，参见例如stackblitz.com/edit/…
@Eliseo 好点，如果您可以直接绑定到 Object，则不需要这两种方式的绑定示例。您的回答和 stackblitz 对 OP 的初始需求有效。

【解决方案2】：

因为您有 一个对象，您可以简单地将对象传递为 @Input 和

<user-component [user]="user"></user-component>

还有你的孩子

@Input() user:any

<input [(ngModel)]="user.name" />
<input [(ngModel)]="user.id" />
<input [(ngModel)]="user.address" />

注意：我真的很喜欢 ReactiveForms，为使用这些而振作起来

【讨论】：