Last active
June 30, 2022 07:12
-
-
Save jhades/2d678f0140a013ec3d0b5eb2e450944c to your computer and use it in GitHub Desktop.
Angular Typed Forms - https://blog.angular-university.io/angular-typed-forms
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@Component({ | |
selector: 'login', | |
templateUrl: './login.component.html', | |
styleUrls: ['./login.component.css'] | |
}) | |
export class LoginComponent { | |
form = this.fb.group({ | |
email: ["", { | |
validators: [Validators.required, Validators.email] | |
}], | |
password: ['', [Validators.required, Validators.minLength(8)]] | |
}); | |
constructor(private fb: FormBuilder) { | |
} | |
login() { | |
} | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@Component({ | |
selector: 'login', | |
templateUrl: './login.component.html', | |
styleUrls: ['./login.component.css'] | |
}) | |
export class LoginComponent implements OnInit { | |
form:FormGroup; | |
constructor(private fb: FormBuilder) { | |
} | |
ngOnInit() { | |
this.form = this.fb.group({ | |
email: ["", { | |
validators: [Validators.required, Validators.email] | |
}], | |
password: ['', [Validators.required, Validators.minLength(8)]] | |
}); | |
} | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
form: FormGroup<{ | |
email: FormControl<string | null>, | |
password:FormControl<string | null> | |
}>; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
form = new FormGroup({ | |
email: new FormControl<string | null>("", { | |
validators: [Validators.required, Validators.email] | |
}), | |
password: new FormControl<string | null>("", | |
{ | |
validators: [Validators.required, Validators.minLength(8)] | |
}), | |
}); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
form = new FormGroup({ | |
email: new FormControl<string | null>("", { | |
validators: [Validators.required, Validators.email], | |
nonNullable: true | |
}), | |
password: new FormControl<string | null>("", | |
{ | |
validators: [Validators.required, Validators.minLength(8)] | |
}), | |
}); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
form = this.fb.group({ | |
email: this.fb.nonNullable.control("", { | |
validators: [Validators.required, Validators.email], | |
}), | |
password: ['', [Validators.required, Validators.minLength(8)]] | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
reset() { | |
this.form.reset(); | |
console.log(this.form.value); | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@Component({ | |
selector: 'login', | |
templateUrl: './login.component.html', | |
styleUrls: ['./login.component.css'] | |
}) | |
export class LoginComponent { | |
form = this.fb.group({ | |
email: ["", { | |
validators: [Validators.required, Validators.email] | |
}], | |
password: ["", [Validators.required, Validators.minLength(8)] ] | |
});; | |
constructor(private fb: NonNullableFormBuilder) { | |
} | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
form = new FormGroup({ | |
email: new FormControl<string | null>("", { | |
validators: [Validators.required, Validators.email] | |
}), | |
password: new FormControl<string | null>("", { | |
validators: [Validators.required, Validators.minLength(8)] | |
}) | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment