我正在使用ionic，
在typescript中创建一个angular2表单html的
<form (ngSubmit)="verify(form)" #form="ngForm">
<ion-input type="text" name="data" #number="ngModel" maxlength='4" [(ngModel)]="digits"></ion-input>
<span *ngIf="number.dirty && form.submitted && form.value.number<4">Enter all numbers</span>
<span *ngIf="number.pristine && form.submitted">Enter number</span>
<button (click)="doAgain()">Click Again</button>
<button type="submit">Verify</button>
</form>
问题1 ：当我点击Click Again按钮时，错误消息显示为输入数字，我不想显示它也会触发verify（）函数。
更新： 问题2 ：我的要求是我只需要在文本框中输入数字而不是字母和特殊字符，例如＆＃39; a＆＃39;，＆＃39; b＆＃39; ，＆＃39; @＆＃39;。因此，通过上面的实现，输入框正在接收b c d和@＃$以及1 2 3的任何内容。我想将它限制为仅限数字。我知道因为我提供的属性为type =＆＃34; text＆＃34;所以它就是这样做的。因为我已改为输入=＆＃34;数字＆＃34;我实现了目标，但输入字段接受的字符数量多于我的maxlength为4。
答案 0 :(得分：2)
您应该添加按钮的import { Injectable } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database-deprecated';
import { AngularFireAuth } from 'angularfire2/auth';
import { Observable } from 'rxjs/Observable';
import { AuthService } from '../services/auth.service';
import * as firebase from 'firebase/app';
import { ChatMessage } from '../models/chat.message.model';
@Injectable()
export class ChatService {
user: any;
chatMessages:FirebaseListObservable<ChatMessage[]>;
chatMessage: ChatMessage;
userName: Observable<string>
constructor(
private db: AngularFireDatabase,
private afAuth: AngularFireAuth
) {
this.afAuth.authState.subscribe(auth =>{
if(auth !== undefined && auth !== null){
this.user = auth;
}
})
}
sendMessage(msg: string){
const timestamp = this.getTimeStamp();
const email = this.user.email;
this.chatMessages = this.getMessages();
this.chatMessages.push({
message: msg,
timeSent: timestamp,
userName: this.userName,
email: email
});
console.log('called sendMessage()!');
}
getTimeStamp(){
const now = new Date();
const date = now.getUTCFullYear() + '/' + (now.getUTCMonth() + 1) + '/' + now.getUTCDate();
const time = now.getUTCHours() + ':' + now.getUTCMinutes() + ':' + now.getUTCSeconds();
return (date + ' ' + time);
}
getMessages(): FirebaseListObservable<ChatMessage[]>{
return this.db.list('messages', {
query: {
limitToLast: 25,
orderByKey: true
}
})
}
}
type点击表单组内的任何按钮，将触发<button (click)="doAgain()" type='button'>Click Again</button>
。
要区分ngSubmit按钮和其他按钮，我们使用此submit
<强> [Reference]
答案 1 :(得分：0)
您可以在输入字段中添加type =“tel”，
<ion-input type="tel" name="data" #number="ngModel" maxlength="4" [(ngModel)]="digits"></ion-input>