用角形提交表格时的垫子选择问题 [英] Problem with mat-select when submitting form in angular

问题描述

我将Angular7与Angular Material一起使用，我有一个包含包含mat-select的组件的表单. 从我的组件中进行选择的形式起作用，但不能进入我的组件.

I use Angular7 with Angular Material, I have a form which contain a component which contain a mat-select. The select in the form out of my component work but not the one into my component.

在此stackblitz上可见: https://stackblitz.com/edit/angular-hqkcgq

Viewable on this stackblitz : https://stackblitz.com/edit/angular-hqkcgq

实际结果是，提交表单不会发送select的值，但必须发送. 提交表单时，您可以在控制台中看到.

The actual result is that submiting form don't send the value of the select, but it have to. You can see in console when submiting the form.

stackblitz已编辑，现在可以按我的意愿工作

edit: the stackblitz is edited and now work as I want

推荐答案

为了将来，请在问题本身中添加所有相关代码. StackBlitz很棒，但是它应该只是对问题的补充:)

For future, please add all relevant code to the question itself. A StackBlitz is great, but it should just be an addition to the question :)

但是对于您的代码，您需要在子组件中提供ControlContainer.因此，添加到您的代码中:

But to your code, in your child component you need to provide ControlContainer. So add to your code:

import { ControlContainer, NgForm } from '@angular/forms';

@Component({
  selector: 'my-comp',
  templateUrl: './my-comp.component.html',
  viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]
})

请参阅令人敬畏的Alexey Zuev的文章: 嵌套模板驱动的表单

Please refer to the article by the awesome Alexey Zuev: Nested Template driven Forms

作为附带说明，在所有提供[ngModel]="''"的地方，您都可以使用ngModel注册表单控件.

As a sidenote, in all places you are providing [ngModel]="''", you can just use ngModel to register the form control.

您的分叉StackBlitz

Your forked StackBlitz

这篇关于用角形提交表格时的垫子选择问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！