Что на самом деле содержит Angular значение FormControl и почему оно отличается от значения nativeElement? - PullRequest
Новая
       33

Что на самом деле содержит Angular значение FormControl и почему оно отличается от значения nativeElement?

0 голосов
/ 01 апреля 2020

Обновление: регистрация событий размытия и нажатия клавиш показывает, что маска никогда не превращается в значение FormControl. Это почему? Даже вызов метода setValue () для самого элемента управления удаляет маску. Как: 

<mat-form-field>
  <mat-label>MSRP Pricing</mat-label>
  <input
    type="text"
    #cost
    matInput
    mask="separator.2"
    thousandSeparator=","
    prefix="$ "
    [formControl]="msrpCtrl"
    (blur)="setVal(msrpCtrl, cost.value)"
    (keyup)="log('keyup', msrpCtrl.value)">
  <mat-error *ngIf="msrpCtrl.hasError('required')">
    MSRP Price is required
  </mat-error>
</mat-form-field>

setVal(control: FormControl, val){
    console.log('set val as' + val);
    control.setValue(val);
  }

Это все еще снимает маску. Есть идеи?

Исходное сообщение:

Я использую Angular 8.0.0, Angular, формы 8.0.0, Angular Материал 8.2.3 и ngx-mask 8.1. 5

Я строил динамическую форму c и использовал маски, чтобы помочь пользователям вводить правильные данные.

По любой причине значения FormControl удаляют маски. Пример случая - Стоимость MSRP.

Итак, у меня есть простой ввод, подобный следующему: 

<mat-form-field>
  <mat-label>MSRP Pricing</mat-label>
  <input
    type="text"
    #cost
    matInput
    mask="separator.2"
    thousandSeparator=","
    prefix="$ "
    [formControl]="msrpCtrl">
  <mat-error *ngIf="msrpCtrl.hasError('required')">
    MSRP Price is required
  </mat-error>
</mat-form-field>

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

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

$ 130 000,56

, то что на самом деле содержит значение formControl, это 130000,56

Я хочу, чтобы оно действительно содержало то, что входное значение имеет значение $ 130 000,56

Единственный способ понять, как это сделать, - обратиться к элементу ввода DOM непосредственно в моем файле TS и получить значение следующим образом: 

@ViewChild('cost', {static: false}) cost: ElementRef;
.
.
.
console.log(this.cost.nativeElement.value);
// Or send the value on

Это определенно не идеально, особенно делать это для более 40 входов. Есть ли причина, по которой маска удаляется из значения FormControl? А если нет, то есть ли лучший способ получения значения, отображаемого в маске?

...