Question

我还在学习Angular 5，并开始使用“反应”表单模型。但是，我能找到的几乎所有示例和教程都可以在一个模板中创建整个表单。通常在AngularJS 1.x中，我们会将每个字段存储在自己的指令中，然后将它们连接在一起以创建一个表单来减少重复。

有没有办法使用Angular 5反应形式只使用一个文件并包含模板和所有验证？我可以看到如何分两部分，我将有一个包含表单元素HTML，验证消息等的组件，但是你还需要在完整表单的组件中创建FormControl并给它默认值和验证。

也许这是非常普遍的，我只是没有正确地搜索它，但如果有人能指出我的任何模式，教程或帮助我会非常感激它，因为我觉得这是我的表格中缺少的最后一块。谢谢！

Answer 1

如果有其他人遇到这个，我能找到的最好的答案（至少在那里被许多其他开发人员使用，即使不是最佳实践）是在父母＆＃34;中创建一个FormGroup。主要形式＆＃34;组件，然后创建一个新的FormControl并将其附加到该FormGroup。例如，以下是可重复使用的表单控件的组件：

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

@Component({
  selector: 'app-project-length',
  templateUrl: './project-length.component.html',
  styleUrls: ['./project-length.component.css']
})
export class ProjectLengthComponent implements OnInit {

 @Input() isFormSubmitted: boolean;
 @Input() projectForm: FormGroup;

 constructor() {
 }

 ngOnInit() {
 this.projectForm.addControl('projectLength', new FormControl(0, [Validators.required, this.hasCorrectLength]));
 }

 hasCorrectLength(control: FormControl): {[s: string]: boolean} {
   const length: number = control.value;
  if (length < 2 || length > 10) {
    return { 'incorrectLength' : true };
  }
  return null;
}

}

以下是该表单元素组件的模板：

<div class="form-group" [formGroup]="projectForm">
<label for="project-length">project length</label>
<input
  class="form-control"
  type="number"
  id="project-length"
  placeholder="Enter project length"
  formControlName="projectLength"
/>
<span class="help-block" 
  *ngIf="!projectForm.controls['projectLength'].valid && (projectForm.controls['projectLength'].touched || isFormSubmitted)">
    please enter a project length between 2 and 9
</span>

这是父表单的组件（已经有我正在处理的教程中的一些内置表单元素，并且只有一个可重用的表单元素组件）：

import { Component, OnInit } from '@angular/core';
import {FormControl, FormGroup, Validators} from '@angular/forms';
import { Status} from '../shared/Status';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  projectForm: FormGroup;
  statuses: Array<Status> = [
    {id: 1, name: 'Critical'},
    {id: 2, name: 'Stable'},
    {id: 3, name: 'Finished'}
  ];
  formSubmitted: boolean = false;

  ngOnInit() {
    this.projectForm = new FormGroup({
      namey: new FormControl(null, [Validators.required, this.cannotBeTest1]),
      email: new FormControl(null, [Validators.required, Validators.email]),
      status: new FormControl('1')
    });
  }

  onSubmit() {
    console.log(this.projectForm);

    this.formSubmitted = true;
    if (this.projectForm.valid) {
    console.log('Form data:');
    console.log(this.projectForm);
  }
}
cannotBeTest1(control: FormControl): {[s: string]: boolean} {
  ...
}
}

以下是主要表单组件的模板的重要部分：

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <form class="ui form-vertical" [formGroup]="projectForm" (ngSubmit)="onSubmit()">
        ...
        <app-project-length [projectForm]="projectForm" [isFormSubmitted]="formSubmitted"></app-project-length>
        ...

重用单个Angular 5反应形式元素

1 个答案: