Question

我正在使用Angular Material 2创建一个表单。我正在使用模板驱动的表单，我有电子邮件输入，它有两个验证器（必需和电子邮件）。在输入组件的文档（https://material.angular.io/components/component/input）中，它只说：

＆＃34;如果输入元素可以有多个错误状态，则由消费者切换应显示哪些消息。这可以通过CSS，ngIf或ngSwitch完成。＆＃34;

没有例子，我无法在任何地方找到它。

这是我的HTML：

...
<form (ngSubmit)="onSubmit(registrationForm)" #registrationForm="ngForm">
    ...

    <md-input-container floatPlaceholder="never">
      <input mdInput type="email" placeholder="Enter your email address" name="email" [(ngModel)]="email" required email>
      <md-error class="required">Email is required.</md-error>
      <md-error class="email">Invalid email.</md-error>
    </md-input-container>

    ...

目前，这两条消息始终显示。即使我输入了一些无效的电子邮件。

任何提到的解决方案（CSS，ngIf或ngSwitch）都可以，但我更喜欢CSS。

Answer 1

见下面的例子。获得工作示例的一个好方法是查看/搜索Angular 2 Material GIT仓库。以下示例来自https://github.com/angular/material2/blob/master/src/demo-app/input/input-demo.html

<div class="container">
  <h1>T.A.S.K. Pet Products by YOUR NAME</h1>
  <article id="contentstart">
    <h2>Customer Information</h2>
    <form action="results.html">
      <fieldset class="name-info">
        <label for="fnameinput">
        First name
        <input type="text" id="fnameinput" name="fnameinput">
        </label>
        <label for="lnameinput">
        Last name
        <input type="text" id="lnameinput" name="lnameinput">
        </label>
      </fieldset>
      <fieldset class="address-options">
        <legend>Please select default T.A.S.K. location.</legend>
        <div class="two-column">
          <input type="radio" id="main" name="taskaddress">
          <label for="main">Main Location</label>
        </div>
        <div class="two-column">
          <input type="radio" id="north" name="taskaddress">
          <label for="north">North Location</label>
        </div>
      </fieldset>
      <fieldset class="contact-info">
        <label for="streetinput">
        Street Address
        <input type="text" id="streetinput" name="streetinput">
        </label>
        <label for="cityinput">
        City
        <input type="text" id="cityinput" name="cityinput">
        </label>
        <label for="stateinput">
        State
        <input type="text" id="stateinput" name="stateinput">
        </label>
        <label for="zipinput">
        Zip
        <input type="text" id="zipinput" name="zipinput">
        </label>
      </fieldset>
      <fieldset class="submitbutton">
        <input type="submit" id="submit" value="Submit">
      </fieldset>
    </form>
  </article>
  <aside>
    <h3>What&rsquo;s New for your Pet</h3>
    <img src="#">
    <p>Sponge chew toys</p>
    <p>Special Leashes</p>
    <p>Glow Collars</p>
    <p>Diet Food</p>
    <p>Veggie Treats</p>
    <p>Cushy Beds </p>
    <p>Grooming Brushes</p>
    <p>Bowls and Dishes</p>
  </aside>
  <footer>
    <p>Helping you help you pets &bull; (623) 555-4321</p>
  </footer>
</div>

Answer 2

这就是我在 Angular 6 （ReactiveFormsModule）

中实现它的方式。

HTML

<form [formGroup]="service.form" class="normal-form">
 <mat-grid-list cols="2" rowHeight="300px">
    <mat-grid-tile>
    <input type="hidden" formControlName="$key">
      <div class="controles-container">
          <mat-form-field>
            <input formControlName="mobile" matInput placeholder="Mobile*">
            <mat-error *ngIf="service.form.controls['mobile'].errors?.required">This field is mandatory.</mat-error>
            <mat-error *ngIf="service.form.controls['mobile'].errors?.minlength">Minimum 8 charactors needed.</mat-error>
        </mat-form-field>      
      </div>
    </mat-grid-tile>
</mat-grid-list>
</form>

Component.ts

export class MyComponent implements OnInit {

  constructor(public service :EmployeeService) { }

  ngOnInit() {
  }

  onClear() {
    this.service.form.reset();

  }
}

服务

export class EmployeeService {

  constructor() { }

  form :FormGroup = new FormGroup({
    $key :new FormControl(null),
    mobile:new FormControl('',[Validators.required,Validators.minLength(10)]),  
  });
}

Angular Material 2 - 处理多个验证错误消息

2 个答案: