Angualr Basic for all Programmer front end.pptx

Basic Angular

1. Reactive Form dengan Angular Mega Jaya., S.T., M.TI

2. Reactive Form Reactive Forms pada Angular adalah teknik untuk membuat form yang dapat mengelola status masukan secara reaktif. Form ini dapat didefinisikan secara dinamis, sehingga kontrol dapat ditambahkan dan dihapus saat proses berlangsung. Kelebihan Reactive Form Memberikan kontrol dan fleksibilitas yang lebih besar atas validasi formulir dan interaksi pengguna Lebih mudah diuji dibandingkan formulir berbasis templat Menawarkan skalabilitas yang lebih baik, terutama dalam skenario yang kompleks

3. Reactive Form Fitur Utama dari Reactive Forms Struktur Data Immutable: Reactive forms menggunakan struktur data yang (immutable), yang berarti setiap pembaruan pada status formulir akan menghasilkan status baru, bukan mengubah status yang sedang ada. Pemrograman Reaktif: Reactive forms memanfaatkan observables dari RxJS, yang memungkinkan Anda untuk merespons perubahan pada status dan nilai/Value pada Form.

4. Reactive Form Step-step untuk create Reactive Form ng g c registrasi-form --standalone (berfungsi untuk create component tanpa link ke modul lain Import Required Modules, lakukan dengan membuka registration-form.component.ts lakukan perubahan code seperti sample berikut:

5. Reactive Form import { Component } from '@angular/core'; import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; @Component ({ standalone: true,   selector: 'app-registration-form',   imports: [ReactiveFormsModule],   templateUrl: './registration-form.component.html',   styleUrl: './registration-form.component.css' }) export class RegistrationFormComponent {   registrationForm: FormGroup;   constructor(private fb: FormBuilder) {     this .registrationForm = this .fb.group({       username: ['', Validators.required],       email: ['', [Validators.required, Validators.email]],       password: ['', [Validators.required, Validators.minLength(6)]],       confirmPassword: ['', Validators.required]     });   }   onSubmit(): void {     if ( this .registrationForm.valid) {       console.log('Form Data:', this .registrationForm.value);     }     else     {       console.log('Form is invalid');     }   } }

6. Reactive Form Lakukan penamban di app.component.ts import { RegistrationFormComponent } from '../components/registration-form/registration-form.component'; @Component({ selector: 'app-root', imports: [ AdminComponent, UserComponent, SidebarComponent, ComplexHighlightDirective, ShowIfDirective, CapitalizePipe, RegistrationFormComponent ],

7. Reactive Form <h2>User Registration</h2> <form [formGroup]="registrationForm" (ngSubmit)="onSubmit()"> <!-- Username --> <div> <label for="username">Username:</label> <input id="username" formControlName="username" /> <div *ngIf="registrationForm.get('username')?.invalid && registrationForm.get('username')?.touched"> Username is required. </div> </div> <!-- Email --> <div> <label for="email">Email:</label> <input id="email" formControlName="email" /> <div *ngIf="registrationForm.get('email')?.invalid && registrationForm.get('email')?.touched"> A valid email is required. </div> </div> <!-- Password --> <div> <label for="password">Password:</label> <input id="password" type="password" formControlName="password" /> <div *ngIf="registrationForm.get('password')?.invalid && registrationForm.get('password')?.touched"> Password must be at least 6 characters long. </div> </div> <!-- Confirm Password --> <div> <label for="confirmPassword">Confirm Password:</label> <input id="confirmPassword" type="password" formControlName="confirmPassword" /> <div *ngIf="registrationForm.get('confirmPassword')?.invalid && registrationForm.get('confirmPassword')?.touched"> Confirm Password is required. </div> </div> <!-- Submit Button --> <button type="submit" [disabled]="registrationForm.invalid">Register</button> </form>

8. Contoh Reactive Forms

9. Form Group Forms yang digunakan untuk mengelola dan mengelompokkan berbagai kontrol formulir (FormControl) menjadi satu unit logis. Dengan menggunakan FormGroup

10. formGroup Import: FormModule ReactiveFormModule FormGroup adalah Class di Angular yang mengelompokkan kontrol form ( FormControl ). FormGroup merupakan bagian dari modul reactive form.

11. Tugas Buat 5 form Input menggunakan reactive form (Nama, Email, Password, No Telp & Alamat) Buat validasi menggunakan validators Buat 1 function untuk mendapatkan input value dari form Munculkan seluruh value dibawah form

12. Decorator

13. Decorator

14. Decorator

15. Decorator

16. Decorator

17. Decorator

18. Decorator