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。您还可以检查字符串插值，以确保绑定正确。

如何在子组件中获取FormControl值？

1 个答案: