Блог

Главная - Вопросы по программированию - Почему form.value пуст в ngAfterViewInit

Почему form.value пуст в ngAfterViewInit

#angular #angular2-forms

#angular #angular2-формы

Вопрос:

Я пытаюсь получить значение моей формы в ngAfterViewInit. К сожалению, он всегда пуст. Я испытываю что-то вроде: {"name1":null, "name2": null} но я получаю { } .

В документации говорится следующее о ngAfterViewInit :

вызывается после инициализации представлений компонента и дочерних представлений.

Я предполагаю, что форма создается на этом этапе, но тогда почему мое значение пустое?

Мой html:

 <form novalidate #form="ngForm">
    // <Item 1...
    // <Item 2...


    <button type="submit" (click)="search()" class="btn btn-default">Zoeken</button>
</form>

//This is displaying the correct value
<div>
    <p>Form: {{ form.value | json }}</p>
    <p>Form status: {{ form.control.status }}</p>
</div>

Компонент:

 export class BijComponent implements AfterViewInit, OnInit {
    @ViewChild('form') form: FormGroup;


    constructor(private bijService: BijService, private sessionService: SessionService) { }

    ngOnInit() {
        // Do stuff
    }

    ngAfterViewInit() {
        let v = JSON.stringify(this.form.value);// is `{ }`???
    }

    search(){
        //Search function
    }
}

Ответ №1:

Это из-за javascript , позвольте мне немного объяснить:

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

Но если переменная никогда не затрагивается, ее значение не null равно, но undefined , что означает, что переменная не существует.

Вот почему вы {} не получаете {"name1":null, "name2": null} .

Комментарии:

1. Тогда почему он не существует в ngAfterViewInit , но существует ли он в search функции?

2. что вы подразумеваете под «существовать в функции поиска»? вы пробовали console.log(this.form.value) внутри search() ?

3. Да, у меня есть. Это дает {"name1":null, "name2": null} . Но мне нужно это значение в ngAfterViewInit или каком-либо другом методе onCreate

4. Вы пробовали с OnInit помощью hook? Я не понимаю, откуда берется проблема. Но есть решение, которое заключается в привязке данных ваших полей к компоненту (скажите мне, хотите ли вы, чтобы я обновил ответ, чтобы показать пример)

5. тот же результат в ngOnInit . Мне не нужен пример. Сейчас я уже использую решение для привязки.