Javascript 角度6和离子3反应形式验证错误未显示
我正在做一个使用Angular和Ionic最新版本的项目。我正在注册页面上工作。当表单输入无效时,我需要显示一些错误。我在我的项目中使用角度反应形式,但如果我检查页面上的错误,它不会显示。它只显示红色下划线,但我需要显示一些可读的错误 这是我的查看代码Javascript 角度6和离子3反应形式验证错误未显示,javascript,angular,ionic3,Javascript,Angular,Ionic3,我正在做一个使用Angular和Ionic最新版本的项目。我正在注册页面上工作。当表单输入无效时,我需要显示一些错误。我在我的项目中使用角度反应形式,但如果我检查页面上的错误,它不会显示。它只显示红色下划线,但我需要显示一些可读的错误 这是我的查看代码 <ion-content padding> <ion-list class="items-middle" text-center> <!-- use the [formGroup] directive t
<ion-content padding>
<ion-list class="items-middle" text-center>
<!-- use the [formGroup] directive to tell Angular that we want to use the registrationForm as the "FormGroup" for this form: -->
<form [formGroup]="registrationForm">
<ion-item>
<ion-label floating>Full Name</ion-label>
<ion-input type="text" formControlName="userName"></ion-input>
<div *ngIf="!registrationForm.controls['userName'].valid && registrationForm.controls['userName'].touched"> name is required</div>
</ion-item>
<!-- <ion-item>
<ion-label color="ligh-grey" floating>Email</ion-label>
<ion-input type="email" formControlName="email"></ion-input>
</ion-item>
<ion-item>
<ion-label color="ligh-grey" floating>Date of Birth</ion-label>
<ion-input type="text" formControlName="dob"></ion-input>
</ion-item>
<ion-item>
<ion-label color="ligh-grey" floating>Phone Number</ion-label>
<ion-input type="number" formControlName="phone" pattern="[0-9]*"></ion-input>
</ion-item>
<ion-item>
<ion-label color="ligh-grey" floating>Address</ion-label>
<ion-input type="text" formControlName="address"></ion-input>
</ion-item>
<ion-item class="job_status">
<ion-label color="ligh-grey" floating>Job Status (Position)</ion-label>
<ion-input type="text" formControlName="jobStatus"></ion-input>
</ion-item>
<ion-item>
<ion-label>Job Sector</ion-label>
<ion-select formControlName="jobSectore">
<ion-option value="f">Government</ion-option>
<ion-option value="m">Private</ion-option>
</ion-select>
</ion-item>
<input type="checkbox" formControlName="isTosRead"> -->
<!-- We can check if our form is valid: -->
<ion-buttons padding-top>
<button ion-button full round type="submit" [disabled]="!registrationForm.valid">SIGNUP</button>
</ion-buttons>
</form>
<pre> {{registrationForm.status}}</pre>
<pre> {{registrationForm.value | json }}</pre>
</ion-list>
</ion-content>
这里到底出了什么问题?为什么我没有得到*ngIf条件,console没有显示任何错误。尝试按如下方式更改条件
<span class="text-danger" *ngIf="registrationForm.controls['userName'].hasError('required') && (registrationForm.controls['userName'].dirty || registrationForm.controls['userName'].touched)">Field is required</span>
<span class="text-danger" *ngIf="registrationForm.controls['userName'].hasError('pattern') && (registrationForm.controls['userName'].dirty || registrationForm.controls['userName'].touched)">Enter valid username.</span>
编辑
还可以按如下方式更改模板:
<span class="text-danger" *ngIf="registrationForm.controls['userName'].hasError('required') && (registrationForm.controls['userName'].dirty || registrationForm.controls['userName'].touched)">Field is required</span>
<span class="text-danger" *ngIf="registrationForm.controls['userName'].hasError('pattern') && (registrationForm.controls['userName'].dirty || registrationForm.controls['userName'].touched)">Enter valid username.</span>
使用formControl添加标记,如下所示:
或将class=文本危险添加到当前文件中
.html文件
显示所需的错误消息
ts文件
您必须在ion item标记外添加错误消息div,如下所示: 另外,您可以简单地使用registrationForm.get'userName'。&®istrationForm.get'userName'。无效>
这里有一个。我想你已经在一个例子中涵盖了这两个条件,比如*ngIf=!registrationForm.controls['userName'].valid&®istrationForm.controls['userName'].touched您的意思是我需要单独检查它们吗?当前如果您提交,它是否显示为不需要?@SahanPasinduNirmal,因为您在字段中使用了&&condition,您必须触摸该字段才能看到错误。registrationForm.get'userName'应将formControl返回给您感谢您的努力和善意考虑,先生,但它显示相同的输出,没有任何基于文本的视觉错误:哦试试这个请输入一个有效的名字。@PankajParkar是的,你是对的!这里唯一的区别是我使用了点运算而不是OPs方式。使用触摸屏仍然可以work@SahanPasinduNirmal是的,这是另一个错误。您应该在离子项目上使用条件instead@PankajParkar是的,没有区别,两种方法都在感谢您的努力和善意,先生,但结果是sameUse p标记而不是span标记。没有兄弟这里有问题,我没有像这样设置控件对象名=>!registrationForm.controls.userName.valid现在生效了这很好。!registrationForm.controls.userName.valid确实有效。但如果您想显示不同的错误消息,请尝试我给出的答案。就你而言。对同一控件有两个验证。喜欢的模式和要求。你可以使用hasError'pattern'和hasError'required.谢谢你的代码对我也有用,先生,我的错误是把div标签放在标签里面了?是的,我猜。我会使用registrationForm.get'userName'而不是registrationForm.controls['userName']。先生,有什么特殊的.get方法吗?您可能需要阅读以下内容:非常有帮助,先生。
<span class="text-danger" *ngIf="registrationForm.controls['userName'].hasError('pattern') && (registrationForm.controls['userName'].dirty || registrationForm.controls['userName'].touched)">Enter valid username.</span>
this.registrationForm = this.fb.group({
'userName': [null, Validators.compose([Validators.pattern('^[a-zA-Z]+$'), Validators.required])]
});
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list class="items-middle" text-center>
<form [formGroup]="registrationForm">
<ion-item>
<ion-label floating>Full Name</ion-label>
<ion-input type="text" formControlName="userName"></ion-input>
</ion-item>
<div *ngIf="registrationForm.get('userName').touched && registrationForm.get('userName').invalid"> name is required</div>
<ion-buttons padding-top>
<button ion-button full round type="submit" [disabled]="!registrationForm.valid">SIGNUP</button>
</ion-buttons>
</form>
<pre> {{registrationForm.status}}</pre>
<pre> {{registrationForm.value | json }}</pre>
<pre> {{registrationForm.get('userName').invalid | json }}</pre>
<pre> {{registrationForm.get('userName').touched | json }}</pre>
</ion-list>
</ion-content>