[英]angular 6 :- Reactive form validation is not working propery
需要關於 angular 6 反應式表單驗證,我從官方 angular 網站上學習過
我想驗證我的表單並針對不同的錯誤顯示不同的錯誤消息
組件代碼
this.pinForm = new FormGroup({
'defaultPin': new FormControl(this.pin.oldPin, [
Validators.required,
Validators.minLength(4)
])
});
html代碼
<form [formGroup]="pinForm" #formDir="ngForm">
<div class="form-group">
<label for="defaultPin">Default Pin</label>
{{formDir.valid}}
<input type="text" name="defaultPin" class="form-control" id ="defaultPin" aria-describedby="defaultPin" placeholder="Please enter your old Pin"
formControlName = "defaultPin" />
<small id="defaultPin" class="form-text text-muted">Check your Email address for default pin.</small>
{{defaultPin}}
<div *ngIf="defaultPin.invalid && (defaultPin.dirty || defaultPin.touched)"
class="alert alert-danger">
enter code here
<div *ngIf="defaultPin.errors.required">
Name is required.
</div>
<div *ngIf="defaultPin.errors.minlength">
Name must be at least 4 characters long.
</div>
</div>
</div>
但是當我運行時,我收到此錯誤
ERROR TypeError: Cannot read property 'invalid' of undefined
at Object.eval [as updateDirectives] (AddPinComponent.html:21)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:10756)
at checkAndUpdateView (core.js:10153)
at callViewAction (core.js:10394)
at execComponentViewsAction (core.js:10336)
at checkAndUpdateView (core.js:10159)
at callViewAction (core.js:10394)
at execEmbeddedViewsAction (core.js:10357)
at checkAndUpdateView (core.js:10154)
at callViewAction (core.js:10394)
請幫我
您正在使用reactive form
和Template-driven
。
僅使用Reactive form.
在您的文件中進行更改。 (根據您的要求修改)。
組件.html
<form [formGroup]="pinForm">
<div class="form-group">
<label for="defaultPin">Default Pin</label>
<input type="text" name="defaultPin" class="form-control" id="defaultPin" aria-describedby="defaultPin" placeholder="Please enter your old Pin"
formControlName="defaultPin" />
<span class="text-danger" *ngIf="pinForm.controls['defaultPin'].hasError('required') && (pinForm.controls['defaultPin'].dirty || pinForm.controls['defaultPin'].touched)">This field is required</span>
</div>
</form>
組件.ts
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
export class AppComponent {
pinForm: FormGroup;
constructor(fb: FormBuilder) {
this.pinForm = fb.group({
'defaultPin': [null, Validators.required],
});
}
}
模塊.ts
// Import ReactiveFormModule in your module.ts file
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [ FormsModule, ReactiveFormsModule ],
如果您仍然有問題,請參閱Stackblitz
當您編寫formControlName = "defaultPin"
您為FormControl
提供了名稱,但為了訪問諸如invalid
、 errors
等屬性,您必須從FormGroup
FormControl
實例,例如:
pinForm.get('defaultPin')
因此,只需將以下 getter 添加到您的組件中:
get defaultPin() {
return this.pinForm.get('defaultPin')
}
您需要引用您的pinForm
以獲取其控制器:
*ngIf="!pinForm.controls.defaultPin.valid && (pinForm.controls.defaultPin.dirty || pinForm.controls.defaultPin.touched)"
所以,這就是你的表單應該是什么樣子:
<form [formGroup]="pinForm" #formDir="ngForm">
<div class="form-group">
<label for="defaultPin">Default Pin</label>
{{formDir.valid}}
<input type="text" name="defaultPin" class="form-control" id ="defaultPin" aria-describedby="defaultPin" placeholder="Please enter your old Pin"
formControlName = "defaultPin" />
<small id="defaultPin" class="form-text text-muted">Check your Email address for default pin.</small>
{{defaultPin}}
<div *ngIf="!pinForm.controls.defaultPin.valid && (pinForm.controls.defaultPin.dirty || pinForm.controls.defaultPin.touched)")"
class="alert alert-danger">
enter code here
<div *ngIf="pinForm.controls.defaultPin.errors.required">
Name is required.
</div>
<div *ngIf="pinForm.controls.defaultPin.errors.minlength">
Name must be at least 4 characters long.
</div>
</div>
</div>
此外,您應該在組件ngOnInit()
啟動formGroup
:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.