Fill in input form using value of another input and clear validation-CodePudding

I have below angular material code where email should be copied in username field. But the same is triggering validation error even the value is been copied in username field. Please help me how I can fix this

                                    <input matInput placeholder="Email" formControlName="email" maxlength="75" [(ngModel)]="userEmail"/>
                                    <mat-error *ngIf="signUpForm.controls['email'].errors?.required"> Email address is
                                        required
                                    </mat-error>
                                    <mat-error *ngIf="signUpForm.controls['email'].errors?.pattern"> Enter valid email
                                        address
                                    </mat-error>
                                    <mat-error
                                        *ngIf="!signUpForm.controls['email'].errors?.emailAvailable
                                      && !signUpForm.controls['email'].errors?.pattern && !signUpForm.controls['email'].errors?.required">
                                        Email
                                        address is not available
                                    </mat-error>
                                </mat-form-field>
<mat-form-field appearance="outline">
                                    <input matInput placeholder="Username" formControlName="username"
                                        autocomplete="new-password" [value]=userEmail/>
                                    <mat-error *ngIf="signUpForm.controls['username'].errors?.required">Username
                                        is
                                        required.</mat-error>
                                    <mat-error *ngIf="!signUpForm.controls['username'].errors?.usernameAvailable &&
                                        !signUpForm.controls['username'].errors?.required">
                                        Username is not available.</mat-error>
                                    <mat-error *ngIf="signUpForm.controls['username'].errors?.space">Username
                                        cannot
                                        contain any spaces.</mat-error>
                                    <mat-error *ngIf="signUpForm.controls['username'].errors?.maxlength">
                                        Username must
                                        be at most 50 character(s) long.</mat-error>
                                </mat-form-field>```

CodePudding user response：

Without your ts the options are not clear enough. However, see if this.signUpForm.controls['email'].clearValidators(); can do the trick at the end of the method where you fill the email field from the ts (or where the this.userEmail gets its value).