角5-多分量形

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

将一个角形划分成多个分量的方法是相当直接的。

首先，创建包含以下表单的主组件：-

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 }]“行，这是这段代码中唯一新的东西，但是您不必担心它，只要在代码中使用它即可。需要更详细的解释，请参阅本 链接。

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

Answer 2

这个错误是因为注释的输出行。取消评论。

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