css - 结合 Angular 5 使用内置验证所需属性的浏览器？

Question

我正在使用 Angular 5 构建一个应用程序。我使用 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 中所述指令文档。

If you want to use native validation with Angular forms, just add ngNativeValidate attribute