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>

因此上面的表单包含输入类型文本，下拉列表。单击保存按钮时，将数据插入数据库工作正常。

我想限制用户如果他在没有输入任何数据的情况下点击保存按钮或者没有在下拉列表中选择任何选项。当用户单击包含错误数据的保存按钮时，我想在相应字段下显示错误消息。如果用户输入正确的数据，则保存按钮应调用组件的保存方法。

我是角度2/4的新手..代码有人向我简要介绍了一个想法或一段示例代码..提前感谢

Answer 1

有一些步骤：
1.你必须添加一个标签标签与你想要的massege 2.你必须添加标签* ngIf需要“pacName”并点击
submmit按钮。
3.您必须在输入中添加“required”属性

class="danger-text"

了解更多信息：https://angular.io/guide/form-validation
如果你使用bootstrap，你可以添加{{1}}
它会将红色设置为标签内的文字

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

1 个答案: