Как я могу получить значение FormControl в дочернем компоненте?

Question

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

У меня есть компонент для моей формы с некоторой группой форм, которую я передаю. Я хочу получить значение элемента управления формы внутри компонента, но он всегда возвращает пустую строку. Форма в html шаблоне работает отлично.

Вот мой код component.ts:

import {Component, Input, OnInit} from '@angular/core';
import {FormGroup} from "@angular/forms";

@Component({
    selector: 'obit-careers',
    templateUrl: 'careers.component.html'
})
export class CareersComponent implements OnInit{

    @Input() group: FormGroup;

    public blur: boolean[] = [];
    public year: number;

    ngOnInit() {
        console.log('Object - ', this.group.controls.retirementYear);
        console.log('Value - ', this.group.controls.retirementYear.value);
    }
}

Я вижу объект со всеми свойствами, но не могу получить значение.

Скриншот:

Шаблон HTML.

<div [formGroup]="group">

<ion-row no-padding>
    <ion-col col-12 no-padding>
        <ion-item>
            <ion-label floating>
                {{ 'career.title' | translate }}
            </ion-label>
            <ion-input (ionBlur)="blur['career_title'] = true" clearInput type="text"
                       formControlName="title" minlength="2" maxlength="100">
            </ion-input>
        </ion-item>
        <div *ngIf="blur['career_title'] && (
                                !group.controls.title.valid &&
                                !group.controls.title.pristine)">
            <label class="error-message">{{ 'error.invalid_text_field' | translate }}</label>
        </div>
    </ion-col>
</ion-row>

<ion-row no-padding>
    <ion-col col-12 no-padding>
        <ion-item>
            <ion-label floating>
                {{ 'career.industry' | translate }}
            </ion-label>
            <ion-input (ionBlur)="blur['career_industry'] = true" clearInput type="text"
                       formControlName="industry" minlength="2" maxlength="100">
            </ion-input>
        </ion-item>
        <div *ngIf="blur['career_industry'] && (
                                !group.controls.industry.valid &&
                                !group.controls.industry.pristine)">
            <label class="error-message">{{ 'error.invalid_text_field' | translate }}</label>
        </div>
    </ion-col>
</ion-row>

<ion-row no-padding>
    <ion-col col-12 no-padding>
        <ion-item>
            <ion-label floating>
                {{ 'career.company' | translate }}
            </ion-label>
            <ion-input (ionBlur)="blur['career_company'] = true" clearInput type="text"
                       formControlName="company" minlength="2" maxlength="100">
            </ion-input>
        </ion-item>
        <div *ngIf="blur['career_company'] && (
                                !group.controls.company.valid &&
                                !group.controls.company.pristine)">
            <label class="error-message">{{ 'error.invalid_text_field' | translate }}</label>
        </div>
    </ion-col>
</ion-row>

<ion-row>
    <ion-col col-12 no-padding>
        <ion-item no-padding no-margin>
            <ion-label floating>
                {{ 'career.retirementYear' | translate }}
            </ion-label>
            <ion-datetime (ionBlur)="blur['retirementYear'] = true" displayFormat="YYYY"
                          pickerFormat="YYYY" formControlName="retirementYear"
                          [cancelText]="'button_cancel' | translate"
                          [doneText]="'button_approve' | translate">
            </ion-datetime>
        </ion-item>
        <div *ngIf="blur['retirementYear'] && (
                            !group.controls.retirementYear.valid &&
                            !group.controls.retirementYear.pristine)">
            <label class="error-message">{{ 'error.invalid_year' | translate }}</label>
        </div>
    </ion-col>
</ion-row>

Answer 1

Вы должны отобразить свой HTML-шаблон, давайте посмотрим, что вы там сделали, чтобы убедиться, что это не та ошибка, из которой исходит ошибка. проверь свой careers.component.html очень хорошо. Вы также можете проверить свою интерполяцию строк, чтобы убедиться, что она хорошо привязана.