Угловой 6: отображение формы входа в систему вместе с элементами управления в центре экрана

Question

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

Вот код. html

<div >
<h2>Login</h2>
<form class='form' [formGroup]='loginForm' (ngSubmit)='onSubmit()'>
<div class="form-group">
    <label for="username">Username</label>
    <input type="text" class="form-control" id="username" 
    placeholder="Username" 
            [ngClass]="{ 'is-invalid': submitted && f.username.errors }"/>
    <div *ngIf="submitted && f.username.errors" class="invalid-feedback">
        <div *ngIf="f.username.errors.required">Username is required</div>
    </div>
</div>
<div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" id="password" 
  placeholder="Password"
            [ngClass]="{ 'is-invalid': submitted && f.password.errors }"/>
     <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
        <div *ngIf="f.password.errors.required">Password is required</div>
    </div>
</div>
<div class="form-group">
    <label><input type="checkbox"> Remember me</label>
</div>
<div class="form-group">
  <button [disabled]="loading" type="submit" class="btn btn- 
 primary">Login</button>
</div>

Мои поля формы отображают весь экран.Пожалуйста, смотрите прикрепленное изображение. Но я хочу отобразить все элементы управления в центре экрана.т.е. мне нужно место слева, справа, сверху и снизу на равных местах.Пожалуйста, помогите мне в решении этой проблемы.

Answer 1

укажите ваш самый верхний класс div, предположим makeItCenter и добавьте следующий css

.makeItCenter {
  width: 50rem;
  height:100vh;
  display:flex;
  align-items: center;
  justify-content:center;
}

Answer 2

Поместите весь тег формы в

<div class="row">
<div class="col-sm-6 col-lg-offset-3">
set your form here
</div>
</div>

Это простая начальная загрузка

Answer 3

Ошибка выдает из-за неправильного имени группы форм.В файле ts вы создали имя formGroup как loginFormGroup, а в html имя formGroup - 'loginForm'.изменить это так

<form class='form' [formGroup]='loginFormGroup' (ngSubmit)='onSubmit()'>