Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angular/26.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angular 2表单验证不起作用_Angular_Angularjs Ng Form - Fatal编程技术网

Angular 2表单验证不起作用

Angular 2表单验证不起作用,angular,angularjs-ng-form,Angular,Angularjs Ng Form,我有一个angular 2应用程序(RC.4),我在表单验证方面遇到了问题 我的模板中有以下表单代码 <div class='modal'> <form #modalForm='ngForm'> <div class='heading'> <h4>{{_title}}</h4> <div class='close-icon' (click)='close()'></d

我有一个angular 2应用程序(RC.4),我在表单验证方面遇到了问题

我的模板中有以下表单代码

<div class='modal'>
    <form #modalForm='ngForm'>
      <div class='heading'>
        <h4>{{_title}}</h4>
        <div class='close-icon' (click)='close()'></div>
      </div>
      <div class='body'>
        <input type='text' name='projectName' [(ngModel)]='projectName' required placeholder='Give your project a name...' id='focusOnMe'>
      </div>
      <div class='controls'>
        <button class='btn btn-secondary' (click)='close()'>Cancel</button>
        <button type='submit' class='btn' (click)='sendAction()' [disabled]='!modalForm.form.valid'>{{_action}}</button>
      </div>
    </form>
  </div>

{{{u title}}
取消
{{{u action}}

如您所见,我命名表单元素并将其设置为ngForm,然后在输入中包括必需的属性,最后在提交按钮上说[disabled]=!modalForm.form.valid但是由于某些原因,表单始终标记为有效,即使所需输入为空。我在这里遗漏了什么?

对于Angular 2 RC 4:

您缺少告诉表单您的“projectName”输入应该是表单验证的一部分的部分。只需添加“ngControl='inputId'”:


角度2.0决赛:

  • 将[formGrooup]添加到您的表单:
  • 将“formControlName”添加到控件:

  • <input type='text' 
           name='projectName' 
           ngControl="projectName" 
           [(ngModel)]='projectName' 
           required 
           placeholder='Give your project a name...' 
           id='focusOnMe'>