typescript - Angular 2 kan ikke sætte standardværdi for ControlValueAccessor-komponent

Nedskaleret plunkr: https://plnkr.co/edit/gGCiYjcq70xaewn3n22F?p=preview

@Input() model: any;

propagateChange = (_: any) => {};

registerOnChange(fn) {
  this.propagateChange = fn;
}

registerOnTouched() {}

writeValue(value: any) {

  if (value !== undefined) {
    this.model = value;
  }
}

ngOnInit() {

  // Sets the model properly, but it doesn't show up in the view or outside of the component
  if (!this.model && this.isRequired) {
    this.model = options[0];
  }

  this.propagateChange(this.model);
}

Brug:

<form #myForm="ngForm">
  <custom-select #fuel="ngModel" [(ngModel)]="model.fuel" [options]="fuels" [isRequired]="true" name="fuel"></custom-select>
</form>

Jeg har implementeret ControlValueAccessor for en brugerdefineret select, men jeg kan ikke få den til at sætte en standardværdi, når komponenten først initialiseres i ngOnInit-metoden. model er sat korrekt inde i komponenten, men det afspejles ikke i visningen eller udenfor komponenten. Men hvis jeg derefter ændrer værdien ved at vælge en anden mulighed, virker det.. Er der nogen, der ved hvorfor dette sker?

Svar #1

Jeg synes, dette er den reneste måde:

registerOnChange(fn: any): void {
  this.propagateChange = fn;
  if (this.value == null) {
   this.propagateChange('defautlValue');
  }
}

Svar #2

Du kan bruge følgende for at få det til at virke

@Output() ngModelChange = new EventEmitter();

ngOnInit() {
 ...
 this.ngModelChange.emit(this.model);
}

https://plnkr.co/edit/VQJSDLU9TP2rVBmNeTNr?p=preview

Relaterede artikler