Как получить компонент ввода Angular для отправки своих данных?

Question

У меня есть угловой компонент следующим образом:

import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

/** @title Form field with error messages */
@Component({
  selector: 'app-first-name',
  templateUrl: 'first-name-input.component.html',
  styleUrls: ['first-name-input.component.css']
})
export class FirstNameInputComponent {
  firstname = new FormControl('', [Validators.required]);

  getErrorMessage() {
    return this.firstname.hasError('required') ? 'You must enter a value' : '';
  }
}

с шаблоном следующим образом:

<div class="example-container">
  <mat-form-field>
    <input matInput placeholder="Enter your first name" [formControl]="firstname" required >
    <mat-error *ngIf="firstname.invalid">{{getErrorMessage()}}</mat-error>
  </mat-form-field>
</div>

Я встраиваю компонент следующим образом:

    <div class="form-group">
      <app-first-name></app-first-name>
    </div>

Код формы выглядит следующим образом:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NumberValidators } from '../app.validators';

@Component({
  selector: 'app-contact-form',
  templateUrl: './contact-form.component.html'
})
export class ContactComponent {
  formModel: FormGroup;
  firstname: string;

  constructor(fb: FormBuilder) {
    this.formModel = fb.group({
      form_name: ['']
    });
  }

  onSubmit() {
    if (this.formModel.valid) {
      console.log('valid:', this.formModel.value);
    } else {
      console.log('invalid: ', this.formModel.value);
    }
  }
}

Однако, когда я заполняю поле и нажимаю кнопку, вывод на консоль будет:

valid: {form_name: ""}

То есть, пусто.

Есть идеи, как заставить мой компонент правильно отправлять свои данные?

ДОБАВЛЕНО:

<form [formGroup]="formModel" (ngSubmit)="onSubmit()">

  <div class="messages"></div>

  <div class="container">

    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          <app-first-name></app-first-name>
        </div>
      </div>
      <div class="col-md-12">
        <button type="submit" class="btn btn-success btn-send" value="Send message">Submit</button>
        <button type="reset" class="btn btn-default">Reset</button>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <p class="text-muted"><strong>*</strong> These fields are required. </p>
      </div>
    </div>
  </div>

</form>

Answer 1

FormGroupDirective

Эта директива принимает существующий экземпляр FormGroup. Тогда будет используйте этот экземпляр FormGroup для соответствия любому дочернему FormControl, FormGroup, и экземпляры FormArray для дочерних FormControlName, FormGroupName и Директивы FormArrayName.

Ref: https://angular.io/api/forms/FormGroupDirective#description

Вам необходимо использовать FormGroupDirective для соединения дочерней формы с родительской группой.

  import { Component } from '@angular/core';
    import { FormControl, Validators, ControlContainer, FormGroupDirective } from '@angular/forms';

    /** @title Form field with error messages */
    @Component({
      selector: 'app-first-name',
      templateUrl: 'first-name-input.component.html',
      styleUrls: ['first-name-input.component.css'],
      viewProviders:[{ provide: ControlContainer, useExisting: FormGroupDirective}]
    })
    export class FirstNameInputComponent implements OnInit {
      firstname;

    constructor(private parent:FormGroupDirective){

    }
    ngOnInit(){
      this.parent.form.addControl('firstname',new 
       FormControl('',Validators.required));
    }

      getErrorMessage() {     
        return this.firstname.hasError('required') ? 'You must enter a value' : '';
      }
    }

Answer 2

Ваш app-first-name компонент нуждается в formControl от родителя, здесь есть свойство input, которое будет formControl.

@Component({
  selector: 'app-first-name',
  templateUrl: 'first-name-input.component.html',
  styleUrls: ['first-name-input.component.css']
})
export class FirstNameInputComponent {
  @Input() firstNameControl: FormControl

  getErrorMessage() {
    return this.firstNameControl.hasError('required') ? 'You must enter a value' : '';
  }
}

Передача из родительского контроля, например:

<app-first-name [firstNameControl]="formModel?.get('form_name')"></app-first-name>