Question

我正在尝试制作包含多个组件的表单。我尝试使用模板驱动的表单。以下是我遇到问题的代码：

<form #f="ngForm" (ngSubmit)="onSubmit(f)">
      <app-employee></app-employee>
      <hr>
      <app-experiences-and-education></app-experiences-and-education>
      <input type="submit" value="Submit" class="btn btn-primary btn block">
    </form>

以下是员工组件：

    <div class="form-group">
  <label for="name"> Name </label>
  <input  type="text" name="name" [(ngModel)]="employee.name" #employeeName="ngModel" id="Name" minlength="3" required class="form-control">
  <div class="alert alert-danger mt-2" *ngIf="employeeName.errors?.required && employeeName.touched">
    Name Is Required
  </div>
  <div class="alert alert-danger mt-2" *ngIf="employeeName.errors?.minlength && employeeName.touched">
    Name at least 3 haracters
  </div>
</div>

<div class="form-group">
  <label for="address"> Address </label>
  <input type="text" name="address" [(ngModel)]="employee.address" #employeeAddress="ngModel" minlength="3" required class="form-control">
  <div class="alert alert-danger mt-2" *ngIf="employeeAddress.errors?.required && employeeAddress.touched">
    Address Is Required
  </div>
  <div class="alert alert-danger mt-2" *ngIf="employeeAddress.errors?.minlength && employeeAddress.touched">
    Address at least 3 haracters
  </div>
</div>

<div class="form-group">
  <label for=""> Gender:  </label>
  <label for="male">
    Male
    <input type="radio" name="gender" value="m" id="male" [(ngModel)]="employee.gender">
  </label>

  <label for="female">
      Female
      <input type="radio" name="gender" value="f" id="female">
    </label>

  <!-- <input type="text" name="gender" [(ngModel)]="employee.gender" #employeeGender="ngModel" id="gender" required class="form-control"> -->
  <div class="alert alert-danger mt-2" *ngIf="employeeGender.errors?.required && employeeGender.touched">
    Gender Is Required
  </div>
</div>

以下是经验和教育部分：

    <div class="form-group">
  <label for="experiance"> Experiance </label>
  <textarea name="experiance" id="" cols="30" rows="5" [(ngModel)]="employee.experiance" #employeeExperiance="ngModel" id="Experiance" minlength="3"
  required class="form-control"></textarea>

  <div class="alert alert-danger mt-2" *ngIf="employeeExperiance.errors?.required && employeeExperiance.touched">
    Last Name Is Required
  </div>
  <div class="alert alert-danger mt-2" *ngIf="employeeExperiance.errors?.minlength && employeeExperiance.touched">
    Experiance at least 3 haracters
  </div>
</div>

<div class="form-group">
    <label for="education"> Education </label>
    <textarea name="education" id="" cols="30" rows="5" [(ngModel)]="employee.education" #employeeEducation="ngModel" id="education" minlength="3"
    required class="form-control"></textarea>

    <div class="alert alert-danger mt-2" *ngIf="employeeEducation.errors?.required && employeeEducation.touched">
      Last Name Is Required
    </div>
    <div class="alert alert-danger mt-2" *ngIf="employeeEducation.errors?.minlength && employeeEducation.touched">
      Education at least 3 haracters
    </div>
  </div>

以下是父组件的方法：

onSubmit(submitForm: NgForm) {
    console.log(submitForm.value);
   }

我只有这个错误屏幕截图：

Answer 1

将Angular形式划分为多个组件的方法非常简单。

首先创建包含以下形式的主要组件： -

import { Component } from '@angular/core';

@Component({
    selector: 'main-form',
    template: `
        <div class="container">
            <form #mainForm="ngForm">
                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" class="form-control" id="name"
                           required
                           [(ngModel)]="name" name="name">
                </div>
                <child-form-component></child-form-component>
            </form>
            <pre>{{ mainForm.value | json }}</pre>
        </div>
    `
})
export class MainComponent {
    name: string = "";
}

然后创建子组件： -

import { Component } from '@angular/core';
import { ControlContainer, NgForm } from '@angular/forms';

@Component({
    selector: 'child-form-component',
    template: `
        <fieldset ngModelGroup="childDetails">
            <div class="form-group">
                <label for="child-name">Child Name</label>
                <input class="form-control" id="child-name" type="text" name="childName" [(ngModel)]="childName">
            </div>
        </fieldset>
    `,
    viewProviders: [{ provide: ControlContainer, useExisting: NgForm }]
})
export class ChildFormComponent {
    childName: string = "";
}

注意子组件中的“viewProviders: [{ provide: ControlContainer, useExisting: NgForm }]”行，这是此代码中唯一的新内容，但您不必担心它只是在代码中使用它。 有关详细说明，请按照link 进行操作。

还要注意主要组件中如何使用“ mainForm.value ”。

Answer 2

错误是由于注释掉的行。取消注释。

<!-- <input type="text" name="gender" [(ngModel)]="employee.gender" #employeeGender="ngModel" id="gender" required class="form-control"> -->

Angular 5 - 具有多个组件的表单

2 个答案: