Мульти- <input>Поле в Angular - PullRequest
Новая
       41

Мульти- <input>Поле в Angular

0 голосов
/ 06 мая 2020

В настоящее время я пытаюсь сделать ввод, который на самом деле является отдельным вводом для каждой буквы в Angular 9. Проблема, с которой я столкнулся в настоящее время, связана с обнаружением изменений. Два способа, которые я вижу для этого, находятся в противоречии друг с другом. changes.subscribe() из @ViewChildren() не обновляется, когда я использую пользовательский trackBy в моем *ngFor, но мне нужен trackBy, чтобы предотвратить всевозможные проблемы с распространением изменений в одном поле в другом. Я мог бы использовать специальную функцию trackBy, но она не может получить доступ к данным из моего компонента. Вот мой компонент: 

@Component({
  selector: 'app-multiple-fields',
  templateUrl: './multiple-fields.component.html',
  styleUrls: ['./multiple-fields.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      multi: true,
      useExisting: forwardRef(() => MultipleFieldsComponent),
    },
  ],
})
export class MultipleFieldsComponent
  implements OnInit, AfterViewInit, ControlValueAccessor {
  @Input() numFields: number = 6;
  @ViewChildren('input', { read: ElementRef }) inputs: QueryList<
    ElementRef
  >;
  fields: string[];

  onChange: any = () => {};
  onTouch: any = () => {};

  ngAfterViewInit() {
    this.inputs.changes.subscribe((next: QueryList<ElementRef>) => {
      let val = next.map((el) => el.nativeElement.value).join('');
      this.onChange(val);
      this.onTouch(val);
    });
  }

  ngOnInit() {
    this.fields = Array(this.numFields).fill('');
  }

  trackArray(index, item) {
    return index;
  }

  writeValue(value: string) {
    if (value.length == this.numFields) this.fields = value.split('');
  }

  registerOnChange(fn: any) {
    this.onChange = fn;
  }

  registerOnTouched(fn: any) {
    this.onTouch = fn;
  }
}

Вот шаблон для компонента: 

<input
  #input
  *ngFor="let item of fields; let i = index; trackBy: trackArray"
  [(ngModel)]="fields[i]"
/>

Я надеюсь, что смогу обнаружить любые изменения в массиве fields[] и затем вызвать onChange() и onTouch() с объединенным значением, чтобы иметь возможность использовать [(ngModel)] при использовании компонента. Любая помощь будет принята с благодарностью. Спасибо!

1 Ответ

1 голос
/ 06 мая 2020

возможно, я не понимаю, что вы пытаетесь сделать, но почему вы не используете angular change? 

<input *ngFor="let item of fields" (change)="itemChanged(item)">
...