使用与Angular 5结合使用所需属性验证的浏览器?

时间:2018-03-05 15:08:42

标签: css html5 angular required

我正在使用Angular 5构建一个应用程序。我使用Reactive Forms of Angular创建一个表单。

在输入中,我使用了所需的HTML5验证属性。当我提交表单并且输入为空时,我希望浏览器内置输入验证:

expected browser validation using required attribute

但没有。

Angular是否会抑制浏览器内置验证所需输入字段的行为?我可以激活它并仍然使用FormBuilder吗?



import {Component} from '@angular/core';
import {FormBuilder, FormGroup} from '@angular/forms';

@Component({
  selector: 'app-system-create',
  templateUrl: './system-create.component.html',
  styleUrls: ['./system-create.component.scss']
})
export class SystemCreateComponent {

  form: FormGroup;

  constructor(
    private fb: FormBuilder
  ) {
    this.form = fb.group({
      shortName: ''
    });
  }

  onSubmit() {
    console.log("on submit");
  }

}

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <div class="form-element">
    <label>short name</label>
    <input class="form-control" formControlName="shortName" type="text" placeholder="e.g. SYS" id="systemForm_shortName" required>
  </div>

  <button class="btn btn-primary" type="submit">Speichern</button>
</form>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

您应该尝试在表单元素中添加属性ngNativeValidate,以防止Angular添加novalidate html属性。如Angular NgNoValidate指令文档中所述。

  

如果要对Angular表单使用本机验证,只需添加ngNativeValidate属性

即可