Latihan 1: Reactive Forms — Angular

Latihan 1 dari materi Reactive Forms di Angular — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Starter-nya sudah punya AppComponent dengan imports: [ReactiveFormsModule], method onSubmit() yang kosong, dan template kosong. Import-nya baru berisi ReactiveFormsModule, FormControl, Validators. Lalu:

Tambahkan FormGroup ke import dari '@angular/forms'.
Di class, buat loginForm = new FormGroup({ ... }) berisi dua kontrol: email: new FormControl('', [Validators.required]) dan password: new FormControl('', [Validators.required]).
Di template, tulis <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">.
Di dalam form, dua kolom: <input formControlName="email" /> dan <input formControlName="password" type="password" />.
Di dalam form juga, tombol <button type="submit">Login</button>.

Yang dicek:

Ada <form>, dan ada <button> di dalamnya.
Ada minimal 2 <input>, dan minimal 2 <input> di dalam <form> yang punya formControlName.
Kodenya memuat FormGroup (atau fb.group(), [formGroup]=, dan Validators.required.

Hint

Reactive form dibangun di class: satu FormGroup berisi satu FormControl per kolom, lalu template mengikat <form> ke grup itu dan tiap <input> ke kontrolnya.
Import FormGroup, buat loginForm = new FormGroup({ email: ..., password: ... }) dengan Validators.required di tiap kontrol, lalu di template <form [formGroup]="loginForm"> berisi dua <input formControlName> dan satu <button>.
loginForm = new FormGroup({ email: new FormControl('', [Validators.required]), password: new FormControl('', [Validators.required]) }) dan template: <form [formGroup]="loginForm" (ngSubmit)="onSubmit()"><input formControlName="email" /><input formControlName="password" type="password" /><button type="submit">Login</button></form>

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Reactive Forms — Angular

Hint

Memperbarui Aplikasi