以角度验证不同输入类型的html

Question

我有一个看起来像这样的 html 文件，

<form [formGroup]="addressForm" (ngSubmit)="save()">  

<div class="field"style="padding:1%">
      <label>Pacs name</label>
      <input placeholder="Pacs Name" type="text" [(ngModel)]="pacs.name" formControlName="pacName">
    </div>

  <select class="ui dropdown"  (change)="onChangeforDistrict()" [(ngModel)]="address.state" formControlName="state">
      <option *ngFor="let state of state" [ngValue]="state" [selected]="address.state.id == state.id">
      {{state.name}}</option>
    </select>
    </div>

<button class="positive ui right floated button">
          Save
      </button>


</form>

所以上面的表单包含一个输入类型文本，下拉。当我单击保存按钮时，它在将数据插入数据库时​​工作正常。

如果用户单击保存按钮而不输入任何数据或未在下拉列表中选择任何选项，我想限制用户。当用户单击带有错误数据的保存按钮时，我想在相应字段下显示错误消息。如果用户输入了正确的数据，那么保存按钮应该调用组件的保存方法。

我是 angular 2/4 的新手 .. 有人向我简要介绍了一个想法或一段示例代码.. 在此先感谢

Answer 1

有几个步骤：
1. 您必须添加一个带有您想要的按摩师的标签标签
2.你必须添加到标签*ng如果需要“pacName”并点击
提交按钮。
3. 您必须在输入中添加“必需”属性

<div class="field"style="padding:1%">
      <label>Pacs name</label>
      <input placeholder="Pacs Name" type="text" [(ngModel)]="pacs.name" formControlName="pacName" required>
<label *ngIf="pacName.errors.required && addressForm.submitted" >This filed is required!!</label>
    </div>
</form>

更多信息：https://angular.io/guide/form-validation
如果您使用引导程序，您可以添加 class="danger-text"
它会将标签内的文本设置为红色