Угловой: Добавить пользовательский канал в элемент addControl () - PullRequest
Новая
       14

Угловой: Добавить пользовательский канал в элемент addControl ()

0 голосов
/ 24 апреля 2019

Итак, я создал пользовательский канал, который позволит мне удалять пробелы из текстового поля. Вот так: 

@Pipe({ name: 'removeWhiteSpace' })
export class removeWhiteSpacePipe implements PipeTransform {
    transform(value: any) {
        if (!value) {
            return '';
        }

        return value.replace(/\s*/g, "");
    }
}

В html-файле, если я добавлю это к значению, это нормально, например: 

<input type="text" value="{{ value | removeWhiteSpace }}" />

Однако, в связи с развитием проекта, мы теперь добавляем значение поля, используя .addControl() в файле .ts следующим образом: 

this.phoneNumber.addControl('publicPhoneNumber', new FormControl(null, [Validators.required, Validators.minLength(7), Validators.maxLength(11)]));

и теперь у нас нет value="" в html.

Как использовать пользовательский канал с тем, как это реализовано?

1 Ответ

1 голос
/ 24 апреля 2019

Используйте это как: 

<input type="text" formControlName="publicPhoneNumber" [value]="phoneNumber.get('publicPhoneNumber').value | removeWhiteSpace "/>

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

ngOnInit() {
  this.phoneNumber = this._fb.group({
    publicPhoneNumber: []
  })

  this.phoneNumber.get('publicPhoneNumber').valueChanges.subscribe((val) => {
      this.phoneNumber.get('publicPhoneNumber').setValue(this._remSpacePipe.transform(val), {emitEvent: false})
  })
}

Смотрите пример здесь: https://stackblitz.com/edit/angular-vrsxou

...