<div class="login-container">
  <form (ngSubmit)="onLogin(loginForm)"class="login-form" id="login-form" #loginForm="ngForm">
    <div class="header-container">
      <label class="login-header" attr.aria-label="login">{{ loginData.header }}</label>
    </div>
    <div class="fields-container">
      <div *ngFor="let field of loginData.fields" class="field">
        <label class="field-label">
          {{ field.name }}:
        </label>

        <input
         ngModel
         class="field-input"
         attr.aria-label="{{ field.name }}"
         [name]="field.name"
         [type]="field.type"
         [value]="field.value"
         [placeholder]="field.placeholder || ''"
         [required]="field.isRequired || false"
         (focusout)="focusOutOfInput(loginForm, field)"/>

         <p class="invalid-input" *ngIf="field.isInvalid">{{ field.invalidMessage }}</p>
      </div>

      <button
        type="submit"
        class="form-submit"
        form="login-form"
        tabindex="0"
        attr.aria-label="send"
        [disabled]="!loginForm.valid">Login</button>
    </div>

  </form>
</div>

./login.component.css

.login-container {
  border: 1px solid #939598;
  white-space: nowrap;
  font-family: Arial;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  text-overflow: ellipsis;
  position: relative;
  font-size: 0.9em;
  overflow-x: hidden;
  overflow-y: hidden;
}

.header-container {
  border-bottom: 1px solid #939598;
  background-color: #f4f5fb;
  width: 100%;
  height: 28px;
  position: sticky;
}

.login-header {
  margin-top: auto;
  margin-left: 7px;
  padding: 5px;
  font-weight: bold;
  font-size: 0.9em;
}

.fields-container {
  overflow-y: auto;
  /* display: table; */
  font-size: 0.9em;
  padding: 5px;
}

.field {
  display: table-row;
  margin: 5px;
}

.field-label {
  padding: 10px;
  display: table-cell;
}

.field-input {
  display: table-cell;
  border: 1px solid #939598;
  border-radius: 5px;
}

.field-input:focus {
  box-shadow: 0 0 5px rgb(56, 186, 223);
}

.form-submit {
  margin: 10px;
  margin-top: 15px;
  display: table-row;
  border: 1px solid #00a4b0;
  border-radius: 5px;
  background-color: #00a4b0;
  color: #f7f7f7;
  width: 10em;
  height: 2em;
  transition: all 0.2s;
  font-size: 1.1em;
  position: relative;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.form-submit:hover {
  background-color: #01858f;
}

.form-submit:disabled {
  background-color: #c0c0c0;
  border-color: #c0c0c0;
  color: #ffffff;
}

/* input.ng-invalid[required] {
  border-left: 5px solid #03c2cf;
} */

/* input.ng-valid[required] {
  border-left: 5px solid #42A948;
} */

input.ng-invalid.ng-touched[required] {
  /* border-left: 5px solid #A94442; */
  border-color: #A94442;
}

.form-submit:focus {
  outline: 2px solid rgb(50, 150, 218);
  outline-offset: 5px;
}

.invalid-input {
  margin: 0px;
  padding: 0px;
  color: #A94442;
  font-size: x-small;
}