Проблема, чтобы объявлять директивный орган в модальном Формуляре без .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, но также оно не функционировало. Кто-то, кто мог бы ориентироваться, как использование этого или кто переместил бы то же самое его с каким-то другим директивным органом в этом типе формуляров???. Благодаря меньше читать из-за это.
в этом типе случая, поскольку у меня нет одного .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;
}