代码之家 › 专栏 › 技术社区 › Ali Bedaer

具有多个组件的角形5

angular5 typescript angular

Ali Bedaer · 技术社区 · 6 年前

我正在尝试制作一个包含多个组件的表单。我试着用模板驱动的表单来做这件事。以下是我遇到问题的代码:

<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);
   }

我只得到了这个错误屏幕截图:

2 回复 | 直到 5 年前

Yatharth Varshney 6 年前

将一个角形分割成多个分量的方法非常简单。

首先,创建 主要成分 包含以下表单:-

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

还要注意“如何” 主窗体。价值 “在主要部件中使用。

Franklin Pious 6 年前

错误是因为注释掉的行。取消注释。

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