Как сделать так, чтобы сообщение электронной почты входило в поле ввода и отображалось за пределами поля ввода?

Question

Я использую реактивную форму и имею несколько полей ввода с соответствующей ошибкой mat для каждого.Все поля ввода сообщений об ошибках появляются за пределами поля ввода, что является правильным и по умолчанию.Но поле ввода электронной почты является единственным, что внутри поля ввода появляется сообщение об ошибке.

Вот код

<!-- username -->
    <div class="">
      <mat-form-field class="">
        <input type="email" matInput
               placeholder="Email" 
               formControlName="username" required>
        <div *ngIf="isFieldValid('username')">
          <mat-error               
            *ngIf="modelForm.controls['username'].hasError('required') 
                   &&
                  modelForm.get('username').touched">
            This is required
          </mat-error>
          <mat-error 
           *ngIf="modelForm.controls['username'].hasError('pattern')">
              Email invalid
          </mat-error>
          <mat-error                                 
           *ngIf="!modelForm.controls['username'].hasError('required') 
                  &&
                  !modelForm.controls['username'].hasError('pattern') 
                  && 
                  modelForm.controls['username'].hasError('isDupe')">               
                    This email has been used already
          </mat-error>
        </div>

      </mat-form-field>
    </div>

<!-- password -->
    <div class="">
      <mat-form-field class="">
        <input matInput type="password" placeholder="Password" 
               formControlName="password" required>

            <mat-error 
                 *ngIf="password.hasError('required')">      
               This is required    
            </mat-error>
        <mat-error 
             *ngIf="password.hasError('pattern')">
          Password should contain at least one number
        </mat-error>

      </mat-form-field>
    </div>

Я хочу, чтобы сообщение об ошибке электронной почты отображалось под полем ввода, подобное сообщению об ошибке пароля.

Answer 1

Внутри html-файла идут так:

<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
    <div class="form-group">
        <label>First Name</label>
        <input type="text" formControlName="firstName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.firstName.errors }" />
        <div *ngIf="submitted && f.firstName.errors" class="invalid-feedback">
            <div *ngIf="f.firstName.errors.required">First Name is required</div>
        </div>
    </div>
<form/>

И в файле TS:

export class AppComponent implements OnInit {
    registerForm: FormGroup;
    submitted = false;

    constructor(private formBuilder: FormBuilder) { }

    ngOnInit() {
        this.registerForm = this.formBuilder.group({
            firstName: ['', Validators.required]
        });
    }

    // convenience getter for easy access to form fields
    get f() { return this.registerForm.controls; }

    onSubmit() {
        this.submitted = true;

        // stop here if form is invalid
        if (this.registerForm.invalid) {
            return;
        }

        alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.registerForm.value))
    }
}

А эта строка <div *ngIf="isFieldValid('username')"> не позволяет создать div полностью

Answer 2

Удалить <div *ngIf="isFieldValid('username')">