我不断收到此错误,对于我的一生,我不知道为什么!“无法读取未定义的属性‘无效’”changeData 验证器有效,但 ChangePasswordForm 表单的验证器不工作。
<form [formGroup]="changedataForm" (ngSubmit)="changeData()">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col">
<div class="form-group">
<label for="inputUsername">Username: </label>
<input class="input1" matInput type="text" id="username" [(ngModel)]="username" autocomplete="off" formControlName="username" required>
<div class="text-danger" *ngIf ="f.username.invalid && (f.username.dirty || f.username.touched)" style="font-size: small;">Username is already taken</div>
</div>
</div>
<div class="col" style="right:-100px;">
<div class="form-group">
<label for="inputUsername">Email: </label>
<input class="input1" matInput type="text" id="email" [(ngModel)]="email" autocomplete="off" formControlName="email" required>
<div class="text-danger" *ngIf ="f.email.invalid && (f.email.dirty || f.email.touched)" style="font-size: small;">Please use another email</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="form-group">
<label for="inputUsername">First Name: </label>
<input class="input1" matInput type="text" id="first_name" [(ngModel)]="first_name" formControlName="first_name" required>
</div>
</div>
<div class="col" style="right:-100px;">
<div class="form-group">
<label for="inputUsername">Last Name: </label>
<input class="input1" matInput type="text" id="first_name" [(ngModel)]="last_name" formControlName="last_name" required>
</div>
</div>
</div>
</div>
<div class="col-md-4">
</div>
</div>
<button type="submit" class="btn btn-primary" [disabled]="!changedataForm.valid">Save changes</button>
</form>
第二种形式的警告文本未激活。两种表单共享一个 HTML 卡片,对于间距问题,我们深表歉意。任何帮助都感激不尽!
<div class="card-header">
<h5 class="card-title mb-0">Password Change</h5>
</div>
<br>
<form [formGroup]="changePasswordForm" (ngSubmit)="ChangePassword()">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col">
<div class="form-group">
<label for="inputUsername">Old Password: </label>
<input class="input1" matInput type="password" id="old_password" autocomplete="off" formControlName="old_password" required>
</div>
<label class="badge" style="align-items: left;">Password</label>
<input class="input1" matInput type="password" id="new_password1" placeholder="" formControlName="new_password1" required>
<div class="text-danger" *ngIf ="f.new_password1.invalid && (f.new_password1.dirty || f.new_password1.touched)" style="font-size: small;">Password must be 8 Characters long</div>
<label class="badge" style="align-items: left;">Password2</label>
<input class="input1" matInput type="password" id="new_password2" placeholder="" formControlName="new_password2" required>
</div>
<div class="col" style="right:-200px;"></div>
</div>
</div>
<div class="col-md-4">
</div>
</div>
<button type="submit" class="btn btn-primary" [disabled]="!changePasswordForm.valid">Save changes</button>
</form>
<br>