Question

链接到完整项目（没有nodes_modules） https://www.dropbox.com/s/4qd8x97ih1f1nho/workinghw4zipped%20%281%29.zip?dl=0

注意：运行后，有关此问题的所有内容都在＆＃34;全部编辑＆＃34;网站的一部分，点击它访问表

本部分网站的目的是让用户输入表格中每行的名称和价格。

如果用户在价格框内输入了一个字符（而不是一个数字），则必须有一个＆＃34;无效输入＆＃34;在用户输入时自动更新的消息。

我应该在代码中添加或更改哪些内容，以允许用户输入＆＃34;无效的输入＆＃34;在价格框中输入字符（而非数字）时的消息？

html文件：

<h1>{{title}}</h1>
<h2>My Heroes</h2>

<form [ngFormModel]="myForm" class="ui form">
<table *ngFor="#hero of heroes">
  <thead>
    <tr>
      <th> ID </th>
      <th> Hero Name</th>
      <th> Price </th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td id="id"><label>{{hero.id}}</label></td>
        <td id="name"><input type = "String" [(ngModel)]="hero.name" placeholder="Pristine name" /></td>
        <div class="field">
        <td id="price">
          <input type = "number" 
          [(ngModel)]="hero.price"
           placeholder="Pristine Price" 
          [ngFormControl]="myForm.find('price')"
          />Input Pristine</td>
           </div>



   <div *ngIf="!sku.control.valid"  
         class="ui error message ">Price can only be an integer.</div>  
       <div *ngIf="sku.control.hasError()"  
         class="ui error message">Input is invalid</div>  
    <div *ngIf="!myForm.valid"  
      class="ui error message">Not pristine.</div>

</tr>
</tbody>
</table>
</form>

.ts文件：

import {Component, OnInit} from 'angular2/core';
import {
  FORM_DIRECTIVES,
  FormBuilder,
  Control, ControlGroup,
  Validators
} from 'angular2/common';
import {Router} from 'angular2/router';
import {Hero} from './hero';
import {HeroService} from './hero.service';



@Component({
  selector: 'SpreadSheetComponent',
  templateUrl: 'app/spreadsheeteditall.component.html',
  styleUrls: ['app/spreadsheeteditall.component.css'],
  providers: [HeroService],
})



export class SpreadSheetComponent {
  myForm: ControlGroup;
  price;

  onSubmit(value: string): void {
    console.log('you submitted value: ', value);
  }  
  heroes: Hero[];
  selectedHero: Hero;

  constructor(fb: FormBuilder, private _heroService: HeroService, private _router: Router) { 
        function skuValidator(control: Control) : { [s: string]: boolean } {
      if (!control.value.match(/[0-9][0-9]*(\.[0-9][0-9])?$/)) {
        return { invalidSku: true };
      }
    };
    this.myForm = fb.group({
      'sku': ['', Validators.compose([
        Validators.required, skuValidator])]
    });
 this.price = this.myForm.controls['sku'];
  }

  getHeroes() {
    this._heroService.getHeroes().then(heroes => this.heroes = heroes);
  }

  gotoDetail() {
    this._router.navigate(['HeroDetail', { id: this.selectedHero.id }]);
  }

  ngOnInit() {
    this.getHeroes();
  }

  onSelect(hero: Hero) { this.selectedHero = hero; }
}

Answer 1

我不确定这是否有效。但这是我解决问题的方法。我希望它适合你。

用 -

替换输入控件的价格

<input type = "number" 
      [(ngModel)]="hero.price"
       placeholder="Pristine Price" 
      [ngFormControl]="myForm.find('price')"
      (keypress)="showErrorIfNotANumber($event)"
      />

然后添加此标记以在任何地方显示消息 -

<p style="color:red;" *ngIf="errorMessage">{{errorMessage}}</p>

修改component.ts文件 -

1）添加变量 -

public errorMessage:any = null;

2）添加此功能 -

public showErrorIfNotANumber(event:any){
if(event.charCode>=48 && event.charCode<=57){
    this.errorMessage = null;
}
else{
    this.errorMessage = 'you can only enter numbers here!';
}
}

Answer 2

您可以使用角度为2的isNaN函数找到isNumber。

  checkData(username: string, email: string, phone: string, msg: string) {
    if (isNaN(Number(phone))) {
        //code
    } else {

    }
  }

Angular2 Javascript验证输入数字不是字符

2 个答案: