Проблема, чтобы объявлять директивный орган в модальном Формуляре без .module.ts

Я с проектом в Угловом 7. У меня есть несколько forms и в полях, которые одинокие цифры и(или) суммы, я использую этот директивный орган onlyDigits (https://github.com/changhuixu/ngx-digit-only) и функционируй очень хорошо. Такой который говорит документацию, когда у меня есть .html, что pertence в модуль, я использую ее, таким образом:

В .module.ts я заявляю, таким образом:

import { DigitOnlyModule } from '@uiowa/digit-only';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    BrowserModule,
    DigitOnlyModule
  ],
  ...
})

И в формуляре html, что нуждался в том, чтобы использовать ее, я делаю это этой формой:


Ничто из другого мира, и такой который как он говорит документацию. ПРОБЛЕМА состоит в том, что у меня есть пара (модальных) формуляров, которые характерные и не определены как модули, тогда не функционирует digitOnly (также он бросает ни ошибки ни ничего... только не функционирует). Это пример одного из них, и где я использую digitOnly, но оно я не функционирует:

и .component.ts вышеупомянутого формуляра:

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';

import { ErrorMessageService } from '../error-message/error-message.service';
import { AditionalNimVo } from '../../services/vos/AditionalNimVo';
import { WSRESTCatalog } from '../../services/catalog.service';

@Component({
selector: 'ngx-aditionalnim',
templateUrl: './aditional-nim.component.html',
styleUrls: ['../../app.component.scss'],
})
    export class AditionalNimComponent implements OnInit {
    @Output() passEntry: EventEmitter = new EventEmitter();

form: FormGroup;
modalHeader: string;
modalOperation: number;
modalObject: any;
modalOperators;
modalMarkets;
payments;

constructor(private activeModal: NgbActiveModal,
            private fb: FormBuilder,
            private catalogService: WSRESTCatalog,
            private errorService: ErrorMessageService,
    ) { }

ngOnInit() {
    this.form = this.fb.group({
        pref: new FormControl(null, Validators.compose([Validators.required, Validators.minLength(2),
            Validators.pattern('^[1-9][0-9]*$')])),
        nim: new FormControl(null, Validators.compose([Validators.required, Validators.pattern('^[1-9][0-9]*$')])),
        operator: new FormControl(null, Validators.compose([Validators.required])),
        market: new FormControl(null, Validators.compose([Validators.required])),
        markettarget: new FormControl(null, Validators.compose([Validators.required])),
        payment: new FormControl(null, Validators.compose([Validators.required])),
    }, { validator: this.checkLenghtTogether });
}

checkLenghtTogether(group: FormGroup): any {

    if (group) {
        const area = group.get('pref').value;
        const num = group.get('nim').value;
        if (area && num && (area.length + num.length) !== 10)
        return {phoneLength: true};
    }

    return null;
}

closeModal(): void {
    this.activeModal.dismiss();
}

changeMarketTarget(value) {
    if (value) {
        this.catalogService.getAllActivePayments(value).subscribe(
            data => {
                this.payments = data['body'];
            },
            error => {
                this.errorService.showError('Aviso Importante',
                    error['error']['description']);
            },
        );
    }
}

onSaveContinue() {
    const aditional = this.fillAditional(
        this.form.value.pref,
        this.form.value.nim,
        this.form.value.operator,
        this.form.value.market,
        this.form.value.markettarget,
        this.form.value.payment);

    this.passEntry.emit(aditional);

    this.form.reset();
}

onSaveClose() {
    const aditional = this.fillAditional(
        this.form.value.pref,
        this.form.value.nim,
        this.form.value.operator,
        this.form.value.market,
        this.form.value.markettarget,
        this.form.value.payment);

    this.passEntry.emit(aditional);

    this.activeModal.dismiss();
}

private fillAditional(nim: string, phone: string,
            operatorid: number, marketid: number, markettargetid: number,
            paymentid: number): AditionalNimVo {
    const aditional = new AditionalNimVo();
    aditional.phone = phone;
    aditional.pref = nim;
    aditional.operatorid = operatorid;
    aditional.operator = this.modalOperators.find(x => Number(x.id) === Number(operatorid))['name'];
    aditional.marketid = marketid;
    aditional.market = this.modalMarkets.find(x => Number(x.id) === Number(marketid))['name'];
    aditional.markettargetid = markettargetid;
    aditional.markettarget = this.modalMarkets.find(x => Number(x.id) === Number(markettargetid))['name'];
    aditional.paymentid = paymentid;
    const pay = this.payments.find(x => Number(x.id) === Number(paymentid));
    aditional.payment = pay['description'];

    return aditional;
}

}

Как он комментировал им ранее, здесь я не функционирует digitOnly, потому что у меня нет одного .module.ts, чтобы это объявлять. Я попытался declarandoló в app.module.ts, но также оно не функционировало. Кто-то, кто мог бы ориентироваться, как использование этого или кто переместил бы то же самое его с каким-то другим директивным органом в этом типе формуляров???. Благодаря меньше читать из-за это.

0
задан 05.11.2019, 17:13
1 ответ

в этом типе случая, поскольку у меня нет одного .module.ts, чтобы объявлять digitOnly, я был должен решать это более "домашней" формы и он вооружил функцию отвечая на событие html keypress. Я оставляю им решение для этого, если в какой-либо он подает его:

В html:

<input type="text" (keypress)="numberOnly($event)" maxlength="4" class="form-control" id="pref" placeholder="Prefijo (sin 0)" [formControl]="form.controls['pref']">

И в .component.ts:

numberOnly(event): boolean {
    const charCode = (event.which) ? event.which : event.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
      return false;
    }
    return true;
}
0
ответ дан 01.12.2019, 12:41