Question

我正在使用Angular 4开发Web应用程序，但我尝试创建一个表单，但我无法正确创建，我无法绑定我的子组件中的数据。

这是我的目录文件，当重要文件夹为dashboard，filter-time（filter和selection）时，它们是我创建表单的主要组件。< / p>

src/app/
├── app-routing.module.ts
├── app.component.css
├── app.component.html
├── app.component.ts
├── app.module.ts
├── dashboard
│   ├── dashboard.component.css
│   ├── dashboard.component.html
│   └── dashboard.component.ts
├── filter-time
│   ├── filter
│   │   ├── filter.component.css
│   │   ├── filter.component.html
│   │   └── filter.component.ts
│   ├── filter-time.component.css
│   ├── filter-time.component.html
│   ├── filter-time.component.ts
│   └── selection
│       ├── selection.component.css
│       ├── selection.component.html
│       └── selection.component.ts
└── shared
    ├── dashboard.service.ts
    ├── data-table.service.ts
    ├── data-table.ts
    ├── selection-data.ts
    └── selection.service.ts

我添加了一个图像来解释我的表单逻辑的真实分布。

Form view final

蓝色：dashboard组件，此html文件包含一个带有我的过滤时间组件和按钮Buscar的表单。
绿色：filter-time组件，其中包含filter和selection组件。
红色：包含两个md-datepicker个组件。
橙色：仅包含四个md-select组件。

我从dashboard.component.html

添加了表单定义

<form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
      <md-card>
        <div
          class="container"
          fxLayout
          fxLayout.xs="column"
          fxLayoutAlign="center"
          fxLayoutGap="10px"
          fxLayoutGap.xs="0">
          <div class="item item-1" fxFlex="90%" fxFlexOrder="1">
            <app-filter-time>Loading filter time...</app-filter-time>
          </div>
          <div class="item item-2" fxFlex="10%" fxFlexOrder="2">
            <button md-raised-button>Buscar</button>
          </div>
        </div>
      </md-card>
</form>

filter-time.component.html定义

<div
  class="container"
  fxLayout
  fxLayout.xs="row"
  fxLayoutAlign="center"
  fxLayoutGap="10px"
  fxLayoutGap.xs="0">
  <div class="item item-1" fxFlex="20%" fxFlexOrder="1">
    <app-filter type_d="Fecha de inicio" [value]=defaultDateStart></app-filter>
  </div>
  <div class="item item-2" fxFlex="23%" fxFlexOrder="2">
    <app-filter type_d="Fecha de termino" [value]=defaultDateEnd></app-filter>
  </div>
  <div class="item item-3" fxFlex="62%" fxFlexOrder="3">
    <app-selection></app-selection>
  </div>
</div>

我添加了filter.component.html，因为它是最终的嵌套组件和相同的selection.component，但我认为两个嵌套组件的逻辑是相同的，但我会添加它以防万一你想看到它

<md-input-container>
  <input
    mdInput
    [mdDatepicker]="picker"
    [placeholder]=[type_d]
    [min]="minDate"
    [max]="maxDate"
    [value]=date
    [(ngModel)]=fecha
    ngModel
    required>
  <button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>
<md-datepicker #picker></md-datepicker>

当我按下终端中的按钮时，我看不到我的数据，但在我的onSubmit方法中，我尝试console.log(f.value)。

dashboard.component.ts（特定于onSubmit）

onSubmit(f: NgForm) {
    console.log("Form values -> ", f.value);
}

如何创建嵌套组件表单

0 个答案: