在Angular2中创建我的第一个模型驱动表单 . 尝试提交表单时遇到问题 . 似乎ngSubmit不是't firing. Here is the tutorial I' m以下:https://scotch.io/tutorials/using-angular-2s-model-driven-forms-with-formgroup-and-formcontrol .

这是我的视图模板:

<form [formGroup]="sForm" novalidate (ngSumbit)="save()">

        <div class="form-group" [class.has-error]="!sForm.controls.hoverDelay.valid">
            <label class="col-sm-2 control-label" for="hoverDelay">Hover Delay (millilseconds):</label>
            <div class="col-sm-10">
                <input formControlName="hoverDelay" id="hoverDelay" type="text" class="form-control">
            </div>
            <span [hidden]="sForm.controls.hoverDelay.valid" [class.help-block]="!sForm.controls.hoverDelay.valid">
                HoverDelay is required and needs to be between 500 - 2000
            </span>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="hoverAction">On Hover:</label>
            <div class="btn-group" id="hoverAction">
                <button type="button" class="btn btn-default">Modal</button>
                <button type="button" class="btn btn-default">Navigate</button>
                <button type="button" class="btn btn-default">Do Nothing</button>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="leftClickAction">On Left Click:</label>
            <div class="btn-group" id="leftClickAction">
                <button type="button" class="btn btn-default">Modal</button>
                <button type="button" class="btn btn-default">Navigate</button>
                <button type="button" class="btn btn-default">Do Nothing</button>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="rightClickAction">On Right Click:</label>
            <div class="btn-group" id="rightClickAction">
                <button type="button" class="btn btn-default">Modal</button>
                <button type="button" class="btn btn-default">Navigate</button>
                <button type="button" class="btn btn-default">Do Nothing</button>
            </div>
        </div>
    <div class="form-group">
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-primary" [class.active]="sForm.value.left">
                <input type="checkbox" formControlName="left" /> Left
            </label>
            <label class="btn btn-primary" [class.active]="sForm.value.right">
                <input type="checkbox" formControlName="right" /> Right
            </label>
        </div>
    </div>

    <button type="submit" class="btn btn-default">Submit</button>
</form>

这是我的组件:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
import { DiagramSettings, NodeAction } from '../../../model/settings/diagram-settings';
import { CustomValidators } from 'ng2-validation';

@Component({
    moduleId: module.id,
    selector: 'settings-form',
    styleUrls: ['settings-form.css'],
    templateUrl: 'settings-form.html'
})

export class SettingsFormComponent implements OnInit {

    public sForm: FormGroup;
    public submitted: boolean;

    constructor(private _formBuilder: FormBuilder) {

        this.sForm = new FormGroup({
            hoverDelay: new FormControl('500', [<any>Validators.required, CustomValidators.range([500, 2000])]),
            left: new FormControl(true, []),
            right: new FormControl(false,[])
        });

        //this.sForm = new FormGroup({
        //    hoverDelay: new FormControl(500, [<any>Validators.required, <any>Validators.minLength(3)])
        //});

    }

    ngOnInit() {

    }

    save() {

        this.submitted = true; // set form submit to true

        // check if model is valid
        // if valid, call API to save customer
        console.log('in model save. ');
    }

}

没有任何运行时错误或奇怪的行为与视图模板/表单,除了它从未进入保存功能单击提交按钮时 . 我可以将(click)事件附加到提交按钮,但我对Angular2表单的理解是,这不应该是必要的 . 我在这里错过了什么?

谢谢!