Mat-autocomplete либо не связывает, ни проверяет - PullRequest
Новая
       24

Mat-autocomplete либо не связывает, ни проверяет

0 голосов
/ 14 декабря 2018

Я работаю над приложением Angular6 с Material Design и ReactiveForms, и у меня возникают некоторые проблемы с получением проверки / привязки для работы с контролем автозаполнения Material.

Насколько я знаю, яМне нужно [formControl] для привязки моих значений и formControlName='countryid' в сочетании с атрибутом required для проверки реактивных форм.

Проблема в том, что я могу заставить поиск работать или ИЛИ проверку, но не то и другое длянекоторая причина.Я почти уверен, что это связано с упомянутыми атрибутами и базовой привязкой, но я просто не вижу проблемы.Я пробовал разные комбинации и обходные пути, но безрезультатно.

Кто-нибудь видит, где я напутал?Заранее спасибо.

Stackblitz здесь: https://stackblitz.com/edit/angular-xhekyg

1 Ответ

0 голосов
/ 15 декабря 2018

Из вашего 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

...