Угловой материал: получить значение из формы

Question

Угловой материал: получить значение из формы

1

Я нахожусь в процессе написания страницы регистрации на Angular. Два переключателя используются для выбора, являетесь ли вы мужчиной или женщиной. Кроме того, вы можете ввести дополнительные данные, такие как имя и адрес. Нажатие на кнопку в конце страницы должно отправить Регистрация.

Как я могу сделать это лучше всего, чтобы получить значения в файле TypScript?

Вот компоненты, которые я хочу использовать:

Input, Select, Radio Button и Date Picker

https://material.angular.io/components/input/overview

https://material.angular.io/components/select/overview

https://material.angular.io/components/radio/overview

https://material.angular.io/components/datepicker/overview

C.J. 21 окт. 2018, в 17:54

Источник

Теги:

angular

javascript

forms

angular-material

1 ответ

Ещё вопросы

Engam · Answer 1 · 2018-10-21T13-25-00.000Z

Вы можете использовать Angular Reactive Forms, что-то вроде этого:

Модуль приложения:

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // other imports ...
    ReactiveFormsModule
  ],
})
export class AppModule { }

Ваш компонент:

import {FormControl, FormGroupDirective, FormGroup, NgForm, Validators} from '@angular/forms';
...
export class SoknadsskjemaComponent implements OnInit {
...

  myForm = new FormGroup({
    gender: new FormControl('', [
      Validators.required
    ]),
    name: new FormControl('', [
      Validators.required,
      Validators.minLength(2)
    ]),
    birthdate: new FormControl('', [
      Validators.required,
    ]),
  });

    onSubmit() {
      // Do somthing
      // You can get the values in the forms like this: this.myForm.value
    }
}

Ваш компонент html

    <form autocomplete="on" [formGroup]="myForm" (ngSubmit)="onSubmit()">
        <mat-radio-group #rGroup class="radio-group" formControlName="gender">
            <mat-radio-button class="radio-button" value="female" radioGroup="rGroup">Female</mat-radio-button>
            <mat-radio-button class="radio-button" value="male" radioGroup="rGroup">Male</mat-radio-group>
        </mat-radio-group>

        <mat-form-field appearance="outline" class="full-width">
            <mat-label>Birthdate</mat-label>
            <input matInput [matDatepicker]="picker" formControlName="birthdate" autocomplete="bday">
            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
            <mat-datepicker touchUi startView="multi-year" [startAt]="startDate" #picker></mat-datepicker>

          </mat-form-field>

          <mat-form-field appearance="outline" class="full-width">
            <mat-label>Name</mat-label>
            <input matInput type="text"  formControlName="name" name="given-name" autocomplete="given-name">
          </mat-form-field>

          <button mat-stroked-button type="submit" [disabled]="!myForm.valid" style="width:100%">Submitt</button>
     </form>