Question

我有一个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>

Answer 1

您的app-first-name组件需要父级的formControl，在这里有一个输入属性，即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' : '';
  }
}

从父级传递from控件，如：

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

Answer 2

FormGroupDirective

此伪指令接受现有的FormGroup实例。然后它将使用此FormGroup实例来匹配任何子FormControl，FormGroup，和FormArray实例添加到子FormControlName，FormGroupName和 FormArrayName指令。

参考：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' : '';
      }
    }

如何获取Angular输入组件以提交其数据？

2 个答案: