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

Nick Hodges спросил: 07 октября 2018 в 01:55 в: angular

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

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>

0 ответов