تایپاسکریپت - انگولار ۲ متریال - استفاده از نمونه تکمیل خودکار MD در یک فرم

آیا روشی وجود دارد که تکمیل خودکار در داخل یک فرم کار کند؟ من یک فرم دارم که ورودی آدرس را میگیرد. من از تکمیل خودکار (که از مستندات Material Design کپی کردهام) برای ایالتها استفاده میکنم (این در ایالات متحده است) و این کار میکند، به جز اینکه ایالت انتخاب شده در user.state قرار نمیگیرد. بنابراین وقتی که myForm.form.value را هنگام ارسال لاگ گیری میکنم، شبیه این به نظر میرسد:

user.name : "Test"
user.phone: ...
etc.

با اینکه user.state حتی نمایش داده نمیشود.

کد (مرتبط) من:

<md-input-container>
  <input 
    mdInput 
    placeholder="State" 
    [mdAutocomplete]="auto"
    [formControl]="stateCtrl"
    name="user.state" 
    [(ngModel)]="user.state"
  >
</md-input-container>

<md-autocomplete 
    #auto="mdAutocomplete"
>
  <md-option 
    *ngFor="let state of filteredStates | async" [value]="state"
    (onSelectionChange)="selectState(state)"
  >
    {{ state }}
  </md-option>
</md-autocomplete> 

TS :

  constructor(public dialog: MdDialog,) { 
    this.stateCtrl = new FormControl();
    this.filteredStates = this.stateCtrl.valueChanges
        .startWith(null)
        .map(name => this.filterStates(name));
  }

  filterStates(val: string) {
    return val ? this.states.filter(s => new RegExp(`^${val}`, 'gi').test(s))
               : this.states;
  }

حتی وقتی سعی میکنم از (onSelectionChange) برای فراخوانی تابع selectState(state) برای تنظیم user.state استفاده کنم، باز هم وقتی فرم را ارسال میکنم و console.log میگیرم، نمایش داده نمیشود.

  selectState(value){
    this.user.state = value;
  }

پاسخ شماره ۱

نگاهی به این مثال گیتهاب بیندازید: نمونه دمو با md-autocomplete (فرمها)

یک مثال شامل فرمهای واکنشی و فرمهای مبتنی بر قالب وجود دارد. در فرم مبتنی بر قالب، شما formControl را به طور کامل حذف میکنید و به جای آن فقط از [(ngModel)] و (ngModelChange) استفاده میکنید. در اینجا نمونهای برای شما با راهحل مبتنی بر قالب آورده شده است:

<form #f="ngForm">
  <md-input-container>
    <input mdInput placeholder="State" [mdAutocomplete]="tdAuto" name="state" 
       #state="ngModel" [(ngModel)]="currentState"
      (ngModelChange)="tdStates = filterStates(currentState)">
  </md-input-container>

  <md-autocomplete #tdAuto="mdAutocomplete">
    <md-option *ngFor="let state of tdStates" [value]="state">
      <span>{{ state }}</span>
    </md-option>
  </md-autocomplete>    
</form>

و در کامپوننت، مقدار فیلتر شده را به یک متغیر متفاوت (tdStates) اختصاص میدهیم و تمام وضعیتها را در آرایه states نگه میداریم:

filterStates(val: string) {
  if (val) {
    const filterValue = val.toLowerCase();
    return this.states.filter(state => state.toLowerCase().startsWith(filterValue));
  }
  return this.states;
}

نسخه آزمایشی