Angular2：具有材质设计的表单：ng消息不会像它那样工作 [英] Angular2: Forms with Material Design: ng-message doesn't work like it should

问题描述

因为我相当新的Angular2我可能犯了一个错误，从.html表到.ts文件的数据绑定，但我无法解决当前的问题。我有一个带有输入字段的表单，该字段具有必需的和最大长度标签。当没有使用材料设计时，我有这些限制显示错误。我有一个按钮来发布输入。

 < form name =postFeedForm> 
< table> 
< tr> 
< td class =long-td> 
< md-input-container class =md-block | long-inputfield> 
< input mdInput name =newDescription[（ngModel）] =newDescription#description placeholder =什么了？ required maxlength =150> 
< md-hint align =end> {{description.value.length}} / 150< / md-hint> 
< div ng-messages =postFeedForm.description。$ errorng-show =postFeedForm.description。$ dirty> 
< div ng-message =required>请输入描述< / div> 
< div ng-message =md-maxlength>超过最大字符{{description.value.length}} / 150< / div> 
< / div> 
< / md-input-container> 
< / td> 
< td> 
< button md-button class =text-upper | spikes_redtype =submit（click）=post（）> Post< / button> 
< / td> 
< / tr> 
< / table> 
< / form> 
  

我不知道#description标签，但没有它，我得到一个错误。问题是我已经遵循不同的例子，我可能会混合起来。我想要做的是在这里（包括代码笔）：

.ts文件：

  export class DashboardComponent {
 newDescription：string; 
 
 post（）{
 //发布一些Feed 
 ... 
描述：this.newDescription，
 ... 
} 
} 
  

资料来源：

资料来源： https ：//github.com/angular/material2/issues/348

我还决定不包括超过最大字符 - 错误，因为我我已经对我的投入加以限制，不可能再超过它了。如果其他人使用我的代码并决定使用该错误，请勿忘记在.ts文件中定义描述（否则您的.length检查将无法正常工作）。

  export class DashboardComponent {
 newDescription：string =''; 
  

Because I'm fairly new with Angular2 I've probably made a mistake to do with data binding from the .html sheet to the .ts file but I can't work the current problem out. I have a form with an input field and this field has the required -and maxlength-tag. I have these restrictions display an error when not followed by using Material Design. And I have a button to post the input.

<form name="postFeedForm">
      <table>
        <tr>
          <td class="long-td">
            <md-input-container class="md-block | long-inputfield">
              <input mdInput name="newDescription" [(ngModel)]="newDescription" #description placeholder="What's up?" required maxlength="150">
              <md-hint align="end">{{description.value.length}} / 150</md-hint>
              <div ng-messages="postFeedForm.description.$error" ng-show="postFeedForm.description.$dirty">
                <div ng-message="required">Please enter a description</div>
                <div ng-message="md-maxlength">Exceeded the maximum characters {{description.value.length}} / 150</div>
              </div>
            </md-input-container>
          </td>
          <td>
            <button md-button class="text-upper | spikes_red" type="submit" (click)="post()">Post</button>
          </td>
        </tr>
      </table>
    </form>

I'm not sure about the "#description"-tag but without it I get an error. The problem is that I've followed different examples and I probably mixed them up. What I'm trying to do can be found here (including Code Pen): https://material.angularjs.org/latest/demo/input

The .ts file:

export class DashboardComponent {
  newDescription: string;

  post() {
    // Post some feed
    ...
    description: this.newDescription,
    ...
  }
}

Source: https://github.com/angular/material2/blob/master/src/demo-app/input/input-demo.html

解决方案

Thanks to developer033 who commented on my question, I noticed that I was using code that doesn't work in Angular2, therefore the solution:

<form name="postFeedForm">
      <table>
        <tr>
          <td class="long-td">
            <md-input-container class="md-block | long-inputfield">
              <input mdInput name="newDescription" [(ngModel)]="newDescription" #description placeholder="What's up?" required maxlength="150">
              <md-hint *ngIf="errorMessagePost()" [ngStyle]="{'color': 'red'}" align="start">{{errorMessagePost()}}</md-hint>  
              <md-hint align="end">{{description.value.length}} / 150</md-hint>
            </md-input-container>
          </td>
          <td>
            <button md-button class="text-upper | spikes_red" type="submit" (click)="post()">Post</button>
          </td>
        </tr>
      </table>
    </form>

The .ts file:

export class DashboardComponent {
  newDescription: string;

  errorMessagePost() {
    if (this.newDescription === '') {
      return 'Please enter a description';
    } else {
      return false;
    }
  }

  post() {
    // Post some feed
    ...
    description: this.newDescription,
    ...
  }
}

Source: https://github.com/angular/material2/issues/348

I also decided to not include the "Exceeded the maximum characters"-error because I've already capped my input and it's not possible to exceed it anymore. If others use my code and decide to use that error, don't forget to define your "description" in the .ts file (otherwise your .length check won't work).

export class DashboardComponent {
  newDescription: string = '';

这篇关于Angular2：具有材质设计的表单：ng消息不会像它那样工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！