Angular 6 не может получить доступ к элементам управления формы внутри ngOnInit директивы - PullRequest
Новая
       35

Angular 6 не может получить доступ к элементам управления формы внутри ngOnInit директивы

0 голосов
/ 15 октября 2018

Я пытаюсь создать директиву в angular 6, которая добавит класс css в контейнер формы / div, когда на основе шаблона есть элемент, который недопустим и затронут.

Простыми словамифункциональность, которой я пытаюсь добиться, заключается в следующем: (обратите внимание на [ngClass] здесь) 

<div class="col-sm-12 col-md-6  form-group " [ngClass]="{'has-error': !ArabicName.valid  && ArabicName.touched}">
 <label class="control-label">Arabic Name</label>
 <input type="text" class="form-control" name="ArabicName" placeholder="Arabic name" required ngModel #ArabicName="ngModel" />
</div>

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

<div class="col-sm-12 col-md-6  form-group " errormarker="ArabicName">
 <label class="control-label">Arabic Name</label>
 <input type="text" class="form-control" name="ArabicName" placeholder="Arabic name" required ngModel #ArabicName="ngModel" />
</div>

Соответствующий код директивы: 

@Directive({
    selector: '[errormarker]'
})
export class ErrorMarkerDirective implements OnInit, OnDestroy {
    @Input('errormarker') elementName: string;
    control: AbstractControl;
    //hasView = false;
    controlValue$: Observable<any>;
    controlSubscription: Subscription;

    constructor(
        private _fg: ControlContainer,
        private _el: ElementRef,
        private render: Renderer2
    ) { }

    ngOnInit() {
        console.log('inside marker');
        console.log(this.elementName);
        console.log(this.form);
        console.log(this.form.controls[this.elementName]); // <--<This LINE
        this.control = this.form.controls[this.elementName];

        let formSubmit$ = (<FormGroupDirective>this._fg).ngSubmit; 

        this.controlValue$ = merge(this.control.valueChanges, of(''), formSubmit$);
        this.controlSubscription = this.controlValue$.subscribe(() => {
            console.log('inside value');
            this.setVisible();
        });
    }

    private setVisible() {
        if (this.control.invalid && this.control.touched) { //(this.control.dirty || 

            this.render.addClass(this._el.nativeElement,'has-error');
        } else {
            this.render.removeClass(this._el.nativeElement, 'has-error');
        }
    }

    match(error: string) {
        if (this.control && this.control.errors) {
            if (Object.keys(this.control.errors).indexOf(error) > -1) {
                return true;
            }
        }
        return false;
    }

    get form() { return this._fg.formDirective ? (this._fg.formDirective as FormGroupDirective).form : null; }

    ngOnDestroy() {
        this.controlSubscription.unsubscribe();
    }
}

Я ожидаю, что когда вызывается ngOnInit, форма должна иметь элементы управления, к которым я могу прикрепить слушателя и добавить / удалить класс.

Однако, это не работает, и когда я отлаживаю, я вижу, что свойство элементов управления пусто, и я получаю ошибку, что this.control is undefined.

enter image description here

...