vcgit-forge/angular-challenges
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/angular-challenges.git synced 2026-02-10 12:53:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

refactor: form component

Browse Source
This commit is contained in:
Timothy Alcaide
2024-04-10 14:24:30 +02:00
committed by thomas
parent c5dd953193
commit 25004e7678
1 changed files with 24 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
apps/angular/dialog-alert-form/src/app/ui/form.component.ts
View File

@@ -1,17 +1,19 @@
import { ChangeDetectionStrategy, Component } from '@angular/core'; import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
@Component({ @Component({
selector: 'app-form', selector: 'app-form',
standalone: true, standalone: true,
imports: [ReactiveFormsModule],
template: ` template: `
<form class="space-y-4"> <form [formGroup]="form" (ngSubmit)="onSubmit()" class="space-y-4">
<div> <div>
<label class="sr-only" for="name">Name</label> <label class="sr-only" for="name">Name</label>
<input <input
class="w-full rounded-lg border-gray-200 p-3 text-sm" class="w-full rounded-lg border-gray-200 p-3 text-sm"
placeholder="Name" placeholder="Name"
type="text" type="text"
name="name" formControlName="name"
id="name" /> id="name" />
</div> </div>
@@ -22,7 +24,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
class="w-full rounded-lg border-gray-200 p-3 text-sm" class="w-full rounded-lg border-gray-200 p-3 text-sm"
placeholder="Email address" placeholder="Email address"
type="email" type="email"
name="email" formControlName="email"
id="email" /> id="email" />
</div> </div>
@@ -32,7 +34,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
class="w-full rounded-lg border-gray-200 p-3 text-sm" class="w-full rounded-lg border-gray-200 p-3 text-sm"
placeholder="Phone Number" placeholder="Phone Number"
type="tel" type="tel"
name="phone" formControlName="phone"
id="phone" /> id="phone" />
</div> </div>
</div> </div>
@@ -44,14 +46,15 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
class="w-full rounded-lg border-gray-200 p-3 text-sm" class="w-full rounded-lg border-gray-200 p-3 text-sm"
placeholder="Message" placeholder="Message"
rows="8" rows="8"
name="message" formControlName="message"
id="message"></textarea> id="message"></textarea>
</div> </div>
<div class="mt-4"> <div class="mt-4">
<button <button
[disabled]="form.invalid"
type="submit" type="submit"
class="inline-block w-full rounded-lg border bg-gray-50 px-5 py-3 font-medium text-gray-900 sm:w-auto"> class="inline-block w-full rounded-lg border bg-gray-50 px-5 py-3 font-medium text-gray-900 disabled:cursor-not-allowed disabled:bg-gray-300 sm:w-auto">
Submit Submit
</button> </button>
</div> </div>
@@ -59,4 +62,17 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
`, `,
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class FormComponent {} export class FormComponent {
private fb = inject(FormBuilder);
form = this.fb.nonNullable.group({
name: ['', { validators: [Validators.required] }],
email: ['', [Validators.required, Validators.email]], // other syntax
phone: '',
message: '',
});
onSubmit() {
if (this.form.valid) this.form.reset();
}
}