Question

我正在使用Material Design和ReactiveForms开发Angular6应用程序，但在获取验证/绑定以在Material自动完成控件上工作时遇到了一些麻烦。

据我所知，我需要[formControl]来绑定我的值，并且需要formControlName='countryid'结合required属性来进行反应式验证。

问题是，由于某种原因，我可以使查找工作正常进行或进行验证，但不能同时进行。我很确定这与提到的属性和基础绑定有关，但我只是没有看到问题。我尝试了不同的组合和解决方法，但无济于事。

有人看到我搞砸了吗？预先感谢。

这里的堆叠闪电战：https://stackblitz.com/edit/angular-xhekyg

Answer 1

在堆叠闪电战中，您的app.module.ts中缺少一些进口商品，在我审核之前，必须解决这些进口商品。

我也不确定app.component.html中包含什么内容，因此我将其注释掉，然后在其中调用了<m-add-place></m-add-place>选择器，因为我认为这是您希望某人关注的内容。

您的第一期是[formControl]="countryAutoCompleteControl" formControlName="countryid" ...

它们都是FormControls，而您实际上是将两个FormControls分配给同一输入。

countryAutoCompleteControl是作为类变量创建的独立FormControl。

countryid是FormControl内的addPlaceForm

我从删除[formControl]="countryAutoCompleteControl"开始，因为您不需要它。我也从您的输入中删除了required，因为它也是不需要的...您已经在这里countryid: ['', Validators.required]

了

<input matInput formControlName="countryid" type="text" placeholder="Pick one"
       aria-label="Number" [matAutocomplete]="auto">

在您的ngOnInit中将其更改为此以执行相同的操作..仅使用countryid中的addPlaceForm

 // this.countryAutoComplete = this.countryAutoCompleteControl.valueChanges.pipe(
     this.countryAutoComplete = this.addPlaceForm.get('countryid').valueChanges.pipe(

Stackblitz

https://stackblitz.com/edit/angular-qy4nrm?embed=1&file=src/app/addplace/addplace.component.ts

Mat-autocomplete不绑定或验证

1 个答案: