ngx-formly json powered использовать десятичную трубу - PullRequest
Новая
       41

ngx-formly json powered использовать десятичную трубу

0 голосов
/ 29 ноября 2018

Чтобы сохранить конфигурацию формы в базе данных для нового проекта Angular, я нашел этот пример с Angular2 Formly.

Я начал с использования шаблона начальной загрузки и мог довольно легко генерировать поля с помощью minмаксимальные значения и т. д.

Теперь я хотел бы настроить элементы ввода, которые могли бы содержать только цифры, а также использовать определенное (переменное) количество десятичных знаков.и для этого я создал следующий компонент пользовательского типа с другим this дополнением Angular Text-mask: 

import { Component } from '@angular/core';
import { FieldType } from '@ngx-formly/core';
import createNumberMask from 'text-mask-addons/dist/createNumberMask';


@Component({
  selector: 'formly-field-decimal-input',
  template: `
   <div class="form-group">
   <label class="form-control-label control-label">
   {{ to.label }}
 </label>
     <input type="text" class="form-control" [textMask]="{mask: numberMask}" [formControl]="formControl" [formlyAttributes]="field">
   </div>
 `,
})


export class FormlyFieldDecimalInput extends FieldType {
  public numberMask = createNumberMask({
    prefix: '',
    suffix: '',
    includeThousandsSeparator: false,
    allowDecimal: true,
    decimalSymbol: '.',
    decimalLimit: 1,
    integerLimit: null,
    requireDecimal: true,
    allowNegative: false,
    allowLeadingZeroes: false
  });
}

Я называю этот тип через json следующим образом: 

[
  {
    "key": "decimal",
    "type": "decimal",
    "templateOptions": {
      "label": "Custom Type for 1 Decimal mask (needs calculated completion onBlur)",
      "placeholder": "Eg: 18.3",
      "decimalLimit": 1
    }
  }
]

Это маскирует ввод, чтобы помочь ввести правильный формат.То, чего я не могу достичь, это, во-первых, как сделать динамический decimalLimit, чтобы я мог использовать один тип для различных десятичных значений, а во-вторых, и как я могу автоматически генерировать, например, 1.0, когда пользователь вводит только 1

...