无法读取未定义的属性“无效”

Question

我不断收到此错误，对于我自己的一生，我不知道为什么！ changeData验证器“无法读取未定义的属性'invalid'”，但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>