Невозможно связать значение по умолчанию, используя formControl с общим компонентом

Question

У меня есть пользовательский выпадающий список, в котором мне нужно обновить или установить значение по умолчанию, используя formControlName.Я использую ControlValueAccessors в общем компоненте, чтобы я мог прикрепить formControls к ним в родительском компоненте и обновить значения formControl формы.

В настоящее время у меня возникла проблема при установке значения по умолчанию с помощью приведенного ниже кода.

this.parentForm = this.fb.group({
  district: ['bangalore', Validators.required], // bangalore should be set as my default value.
  distance: [''],
  state:['']
});

HTML-код:

<form [formGroup]="parentForm">
<app-common-dropdown placeHolder="select district" [dropDownId]="'districtLabel'" [dataList]="['bangalore','chennai','pune']" formControlName="district" ></app-common-dropdown>
<app-common-dropdown placeHolder="select distance" [dropDownId]="'distanceLabel'" [dataList]="[100,200,300,400]" formControlName="distance" ></app-common-dropdown>
<app-common-dropdown placeHolder="select state" [dropDownId]="'stateLabel'" [dataList]="['karnataka','tamil nadu','mumbai']" formControlName="state"  ></app-common-dropdown>

Я приложил пример кода для этого https://stackblitz.com/edit/angular-p2gvtm. Пожалуйста, посмотрите демонстрационный код и помощья чувствую, что код пишется больше для установки и получения значений с помощью formcontrols.

Answer 1

Здравствуйте, это stackblitz с рефакторированным форком вашего кода.

Прежде всего, если вы хотите отобразить значение элемента управления, вы должны передать его туда, где вы находитесьсобираюсь визуализировать это.

app.component

<form [formGroup]="parentForm">
	<app-common-dropdown [controlForDisplay]="parentForm.get('city')"
                       placeHolder="select district"
	                     [dataList]="['bangalore','chennai','pune']"></app-common-dropdown>
	<app-common-dropdown [controlForDisplay]="parentForm.get('state')" 
                       placeHolder="select distance"
	                     [dataList]="[100,200,300,400]"></app-common-dropdown>
	<app-common-dropdown [controlForDisplay]="parentForm.get('country')" 
                       placeHolder="select state"
	                     [dataList]="['karnataka','tamil nadu','mumbai']"></app-common-dropdown>
</form>

<button type="submit" (click)="getFormValues()">submit</button>

В вашем случае я добавил новый ввод для вашего app-common-dropdown, который называется controlForDisplay, чтобы передать ссылку на требуемый formControl на компонент.Я также удалил dropdownId, причину этого действия я объясню позже.

common-dropdown.component.html

<div [ngClass]="{'cs-active': dropdownOpen}" 
     class="cs-select cs-skin-border" 
      tabindex="0">
	<span  (click)="selectClicked($event)" class="cs-placeholder">
    {{!!controlForDisplay.value ? controlForDisplay.value : placeHolder  }} 
  </span>
  <div class="cs-options">
    <ul>
      <li *ngFor="let item of dataList" (click)="selectOption(item)">
        <span>{{item}}</span></li>
    </ul>
  </div>
</div>

Итак, мы идем к common-dropdown.component.html, где важной частью является следующая строка {{!!controlForDisplay.value ? controlForDisplay.value : placeHolder }}

Теперь через добавленный controlForDisplayНа входе мы можем получить доступ к ссылке formControl, которая содержит требуемое значение по умолчанию раскрывающегося списка, и визуализировать его, если есть какое-либо значение по умолчанию, или отобразить заполнитель, если элемент управления формы пуст.

commpon-dropdown.component.ts

@Component({
  selector: 'app-common-dropdown',
  templateUrl: './common-dropdown.component.html',
  styleUrls: ['./common-dropdown.component.css']
})
export class CommonDropdownComponent {

  @Input() placeHolder: string;
  @Input() dataList: any;
  @Input() controlForDisplay: FormControl = new FormControl()

  dropdownOpen = false;

  selectClicked(event: any) {
    this.dropdownOpen = true
  }

  selectOption(value: string) {
    this.controlForDisplay.patchValue(value)
    this.closeDropDown('')
  }

  closeDropDown(event: any) {
    this.dropdownOpen = false;
  }
}

Здесь основные изменения заключаются в том, что вместо использования собственных элементов мы обновляем значение formControl через API-форму formControl, называемую значением патча, тем самым мы обновляем всеФорма, к которой обращаются как из родительского, так и из текущего компонента.

ps

Вы должны добавить CommonModule в ваш app.module.

В значительной степени это исправляет вашпроблема.Имейте в виду, что почти всегда предпочтительнее использовать Angular API при создании веб-страниц с Angular, а не DOM API, я бы посоветовал вам взять Tour of Heroes , который является официальным угловымучебник.