小编Cel*_*bes的帖子

假设我从angular2应用程序生成的html如下所示:

<app>
<form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm.value)">
<panel-component>
    <mid-component>
        <inner-component-with-inputs>
            <input/>
        <inner-component-with-inputs>
    <mid-component>
</panel-component>
<panel-component>
    <mid-component>
        <inner-component-with-inputs>
            <input/>
        <inner-component-with-inputs>
    <mid-component>
</panel-component>

<!-- many many many fields -->

<button type="submit">Submit</button>
</form>
</app>

如何设置我的外部<form>以便我可以在提交时验证所有内部输入？我必须通过myForm通过@Input()从一路下跌panel-component到inner-component-with-inputs？或者还有其他方式吗？

在我的应用程序中,我有一个非常大的形式,有多个面板,子面板,标签,模态等.我需要能够在提交时一次性验证它.

互联网上的所有教程和资源仅涉及跨越一个组件/模板的表单.

我想写一些数字<input>并{{}}通过管道将其动态显示为十进制内部.它会引发异常.这是我的代码:

app.template.html:

<h1>amount = {{amount|number:'1.2-2'}}</h1>
<input [(ngModel)]="amount"/>

app.component.ts:

import {Component} from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: 'app/app.template.html'
})
export class AppComponent {
  private amount:number;
}

Plunker:http://plnkr.co/edit/I7ynnwBX4DWJfHNPIPRu？p =preview

将任何数字写入输入并查看控制台中抛出的异常.

编辑:

根据rinukkusu建议的工作代码:

app.template.html:

<h1>amount = {{amount|number:'1.2-2'}}</h1>
<input [ngModel]="amount" (ngModelChange)="onChange($event)"/>

app.component.ts:

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: 'app/app.template.html'
})
export class AppComponent {
  private amount:number;

  onChange($event) {
    this.amount = +$event;
  }
}

这+旁边$event是非常重要的,是什么让从字符串转换到一些可能的!