Angular 引用传入的 NgModel答案

【问题标题】：Angular reference an NgModel passed inAngular 引用传入的 NgModel
【发布时间】：2019-04-07 20:19:00
【问题描述】：

在一个组件的 HTML 模板中：

<input [(ngModel)]='dataModel' #data="ngModel" />
<app-my-component [model]='data'></app-my-component>

在app-my-component:

export class MyComponentComponent implements OnInit {
    @Input() model: NgModel;
}

在运行时，它给了我一个错误ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'model: null'. Current value: 'model: address'。

有什么想法吗？

【问题讨论】：

标签： angular angular-components angular-forms ngmodel

【解决方案1】：

我不知道你为什么要这样做，只是这样做：

<input [(ngModel)]='dataModel'/>
<app-my-component [model]='dataModel'></app-my-component>

ts：

export class MyComponentComponent implements OnInit {
    @Input() model: string;
}

【讨论】：

我希望能够引用inpput 的invalid 和errors 属性。
在这种情况下，您应该将错误和无效的模型发送到您的 app-my-... 类似：@Input('valid') valid: string; @Input('errorText') error: string;

【解决方案2】：

尝试使用ChangeDetectorRef告诉Angular NgModel的数据有新的变化。

constructor(private cdr: ChangeDetectorRef) {}

ngAfterViewInit() {
    this.cdr.detectChanges();
}

【讨论】：

这可能有效，但不适合我的需要。还是谢谢。
那你需要什么