将浏览器内置的必需属性验证与 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 attribute. As explained in the Angular NgNoValidate 指令文档。

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

将浏览器内置的必需属性验证与 Angular 5 结合使用？

Use browsers built in validation of the required attribute in combination with Angular 5?

html

css

required

angular