Я хочу проверить достоверность моих полей с помощью простого валидатора, но он все время говорит, что он недействителен. Я также не вижу ошибок в своей консоли.
В моем файле component.ts :
this.oneClickForm = this.fb.group({
pwdControl: ['', [Validators.required, Validators.minLength(7)]],
pwdControl2: ['', [Validators.required, Validators.minLength(7)]]
});
get pwdControl() {
return this.oneClickForm.get('pwdControl');
}
get pwdControl2() {
return this.oneClickForm.get('pwdControl2');
}
Мой HTML:
<form [formGroup]="oneClickForm">
<div *ngIf = "showErrors" class="alert alert-danger mb-0 form-errors">
<span class="block">{{errorMsgOne}}</span>
<span class="block">{{errorMsgTwo}}</span>
</div>
<div *ngIf="showErrors">
<div *ngIf="pwdControl.hasError('minlength') || pwdControl2.hasError('minlength')" class="alert alert-danger">
<span>Password's length must be more than 6 characters</span>
</div>
<div *ngIf="pwdControl.hasError('maxlength') || pwdControl2.hasError('maxlength')" class="alert alert-danger">
<span>Password's length must be less than 30 characters</span>
</div>
<div *ngIf="pwdControl.hasError('regexPassword')">
User name not valid.
</div>
</div>
<div class="form-group">
<label for="createPassword">Create your Password:</label>
<input class="form-control" placeholder="Enter a password" name="pwd" type="password" formControlName="pwdControl" [pattern]="regexPassword">
<small id="emailHelp" class="form-text text-muted">Don't share your password with anyone! :)</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Re-enter Password:</label>
<input class="form-control" placeholder="Re-enter above password" name="confirmPwd" type="password" formControlName="pwdControl2">
</div>
<button [disabled]="isLoading" type="submit" class="btn btn-primary px-4" [disabled] = "!oneClickForm.valid" (click) = "submit(pwd, confirmPwd)">
<i *ngIf="isLoading" class="fa fa-spinner fa-spin"></i> Submit
</button>
</form>
<p>Form value {{ oneClickForm.value | json }} </p>
<p> Form status {{ oneClickForm.status | json}} </p>
</div>
Я ввожу более 7 букв в свои поля, и они говорят, что моя форма все еще недействительна. Чего мне не хватает?