Хобрук: Ваш путь к мастерству в программировании

Как установить только два поля ввода подряд в Angular Form

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

изображение текущей формы

component.html

<div class="container">
  <div class="row">
    <div class="registration-form col-md-6" style="max-width: -webkit-fill-available;">
      <div class="main-div" style="width: inherit;text-align: center">
        <div class="panel">
          <h2> Registration Form</h2>
        </div>
        <div class="alert alert-danger" *ngIf="errorMsg">
          {{errorMsg}}
        </div>
        <form #registartionForm="ngForm" (ngSubmit)="onSubmit()" novalidate>
          <mat-form-field appearance="outline">
            <mat-label>First Name</mat-label>
            <input matInput placeholder="Placeholder">
          </mat-form-field>
          &nbsp;
          <mat-form-field appearance="outline">
            <mat-label>Last Name</mat-label>
            <input matInput placeholder="Placeholder">
          </mat-form-field>
          &nbsp;
          <mat-form-field appearance="outline">
            <mat-label>Email</mat-label>
            <input matInput placeholder="Placeholder">
          </mat-form-field>
          &nbsp;
          <mat-form-field appearance="outline">
            <mat-label>Phone Number</mat-label>
            <input matInput placeholder="Placeholder">
          </mat-form-field>
          &nbsp;
          <mat-form-field appearance="outline">
            <mat-label>Password</mat-label>
            <input type="password" matInput placeholder="Placeholder">
          </mat-form-field>
          &nbsp;
          <mat-form-field appearance="outline">
            <mat-label>Confirm Password</mat-label>
            <input type="password" matInput placeholder="Placeholder">
          </mat-form-field>

        </form>
        <div>
          <button type="submit" class="btn btn-primary login" (click)="btnClick();">Register</button>
        </div>
      </div>
    </div>
  </div>
</div>

Пожалуйста, помогите мне. Спасибо.

typescript javascript angular css angular-material
12.12.2018

  • сгруппируйте свои элементы в div, которые вы хотите, чтобы они были в одной строке 12.12.2018

Ответы:


1

продолжая использовать Angular Material, вы можете установить div вокруг каждой пары, чтобы получить то, что хотите... рабочий пример @ https://stackblitz.com/edit/angular-qqrwni

<form #registartionForm="ngForm" (ngSubmit)="onSubmit()" novalidate >

          <div >
            <mat-form-field appearance="outline">
              <mat-label>First Name</mat-label>
              <input matInput placeholder="First Name">
            </mat-form-field>
            &nbsp;
            <mat-form-field appearance="outline">
              <mat-label>Last Name</mat-label>
              <input matInput placeholder="Last Name">
            </mat-form-field>
            &nbsp;
          </div>
          <div >
            <mat-form-field appearance="outline">
              <mat-label>Email</mat-label>
              <input matInput placeholder="Email">
            </mat-form-field>
            &nbsp;
            <mat-form-field appearance="outline">
              <mat-label>Phone Number</mat-label>
              <input matInput placeholder="Phone Number">
            </mat-form-field>
            &nbsp;
          </div>
          <div >
            <mat-form-field appearance="outline">
              <mat-label>Password</mat-label>
              <input type="password" matInput placeholder="Password">
            </mat-form-field>
            &nbsp;
            <mat-form-field appearance="outline">
              <mat-label>Confirm Password</mat-label>
              <input type="password" matInput placeholder="Confirm Password">
            </mat-form-field>
          </div>
        </form>

12.12.2018

2

Лучше использовать загрузчик и вставить этот код в свой html-файл.

 <div class="container">
  <h1>Register</h1>
  <p>Please fill in this form to create an account.</p>
  <hr>
  <label for="email"><b>Email</b></label>
  <input type="text" placeholder="Enter Email" name="email" required>
  <label for="psw"><b>Password</b></label>
  <input type="password" placeholder="Enter Password" name="psw" required>
  <label for="psw-repeat"><b>Repeat Password</b></label>
  <input type="password" placeholder="Repeat Password" name="psw-repeat" required>
  <button type="submit" class="registerbtn">Register</button>
 </div>
12.12.2018
Новые материалы
Освоение информационного поиска: создание интеллектуальных поисковых систем (глава 1)
Глава 1. Поиск по ключевым словам: основы информационного поиска Справочная глава: «Оценка моделей поиска информации: подробное руководство по показателям производительности » Глава 1: «Поиск..
Фишинг — Упаковано и зашифровано
Будучи старшим ИТ-специалистом в небольшой фирме, я могу делать много разных вещей. Одна из этих вещей: специалист по кибербезопасности. Мне нравится это делать, потому что в настоящее время я..
ВЫ РЕГРЕСС ЭТО?
Чтобы понять, когда использовать регрессионный анализ, мы должны сначала понять, что именно он делает. Вот простой ответ, который появляется, когда вы используете Google: Регрессионный..
Не зря же это называют интеллектом
Стек — C#, Oracle Опыт — 4 года Работа — Разведывательный корпус Мне пора служить Может быть, я немного приукрашиваю себя, но там, где я живу, есть обязательная военная служба на 3..
LeetCode Проблема 41. Первый пропущенный положительный результат
LeetCode Проблема 41. Первый пропущенный положительный результат Учитывая несортированный массив целых чисел, найдите наименьшее пропущенное положительное целое число. Пример 1: Input:..
Расистский и сексистский робот, обученный в Интернете
Его ИИ основан на предвзятых данных, которые создают предрассудки. Он словно переходит из одного эпизода в другой из серии Черное зеркало , а вместо этого представляет собой хронику..
Управление состоянием в микрофронтендах
Стратегии бесперебойного сотрудничества Микро-фронтенды — это быстро растущая тенденция в сфере фронтенда, гарантирующая, что удовольствие не ограничивается исключительно бэкэнд-системами..