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

Question

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

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

但没什么。

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>

Answer 1

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

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