I'm currently working on a registration form and I need some advice on how to implement custom name and email validation. Here is the structure of my form:
registrationForm = this.formBuilder.group({
name: [''],
email: [''],
phone: [''],
address: this.formBuilder.group({
street: [''],
city: [''],
state: [''],
zip: ['']
})
});
If you're looking to register a user, check out this implementation where I utilize a service to handle the response and display any errors using toast messages.
export class RegisterPage implements OnInit {
resgiterForm: FormGroup;
submitted: boolean = false;
constructor(
private formBuilder: FormBuilder,
public navigation: NavigationPageAndParamsService,
public userService: UserService,
public toastController:ToastController
) {}
ngOnInit() {
this.resgiterForm = this.formBuilder.group({
username: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
password: ['', [Validators.required, Validators.minLength(6)]],
});
}
get f() {
return this.resgiterForm.controls;
}
async register() {
console.log('Registration information:', this.resgiterForm);
this.submitted = true;
if (this.resgiterForm.invalid) {
return;
}
this.userService.registerUser(this.resgiterForm.value).subscribe(
data => {
console.log('Data', data);
if (data) {
this.navigation.navigateToPage('/tabs/feeds');
}
},
async err => {
var errMsg = err.error[0].message;
const toast = await this.toastController.create({
message: errMsg,
duration:3000,
position:'bottom',
cssClass:'registration-toast'
})
await toast.present()
}
);
}
}
<form [formGroup]="resgiterForm" (submit)="register()">
<ion-list>
<ion-item class="ion-padding-end ion-padding-start">
<ion-label position="stacked">Username*</ion-label>
<ion-input type="text" formControlName="username" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.username.errors }">
</ion-input>
</ion-item>
<div *ngIf="submitted && f.username.errors" class="invalid-feedback">
<div *ngIf="f.username.errors.required">Username is required</div>
</div>
<ion-item class="ion-padding-end ion-padding-start">
<ion-label position="stacked">Email*</ion-label>
<ion-input type="text" formControlName="email" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.email.errors }">
</ion-input>
</ion-item>
<div *ngIf="submitted && f.email.errors" class="invalid-feedback">
<div *ngIf="f.email.errors.required">Email is required</div>
<div *ngIf="f.email.errors.email">Email must be a valid email address</div>
</div>
<ion-item class="ion-padding-end ion-padding-start">
<ion-label position="stacked">Password</ion-label>
<ion-input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }"></ion-input>
</ion-item>
<div *ngIf="submitted && f.password.errors" class="invalid-feedback">
<div *ngIf="f.password.errors.required">Password is required</div>
<div *ngIf="f.password.errors.minlength">Password must be at least 6 characters</div>
</div>
</ion-list>
<ion-list class="ion-text-center ion-padding-vertical">
<ion-button type="submit" shape="round">Submit</ion-button>
</ion-list>
</form>
The issue appears to be trapped in a loop: package.json is missing type: "module". This results in an error when trying to use modules in TypeScript files: An error occurred while running the seed command: /Users/me/code/me/prisma-learning/grap ...
Exploring the realm of SEO with Angular4/Node.js has presented a unique challenge for me. Utilizing Angular Universal allows for server-side rendering, enabling me to inject meta keywords, title, and image URLs into the HTML before it reaches the browser. ...
type TestAny = any extends 'a' ? 1 : 2 // => 1 | 2 why??? how to interpret? type TestUnknown = unknown extends 'a' ? 1 : 2 // => 2 type TestStringA = 'a' extends 'a' ? 1 : 2 // => 1 type SomeUnion = ' ...
I am working on a project where multiple frontends share a common library. The module dependencies for these projects are managed using npm. In the package.json file of each project, I specify: "dependencies": { "mylib": "file:../<...path...> ...
I have encountered a type error in my reducers' file where it says that my 'Property 'address' does not exist on type 'number | { connection: boolean; address: string; }'. This issue is arising in my React application while us ...
I'm currently facing some challenges trying to add multiple child routes to a tab in my App using Ionic with Vue.js Everything is working perfectly fine with this setup: { path: 'tab3', component: () => import('@/views/Tab3. ...
exploring the intricacies of design decisions, sub systems, frameworks, and libraries Hello! I am relatively new to Angular and have encountered a puzzling issue that I can't quite figure out. I could easily create a lengthy if statement to address i ...
I am developing a React application that utilizes React Router. I am encountering an issue where clicking on links within my BaseNav component does not render the correct components defined in my routes. I have thoroughly examined the code but cannot ident ...
I am working on an Angular4 application that utilizes JWT for authentication. Using the angular2-jwt project on the client side, I have successfully implemented JWT. Now, I want to add additional data (such as full name and email) to the token on the serve ...
Incorporating environment variables into my Angular app via the CI/CD pipeline is something I'd like to do. This would allow for automatic configuration of both environment.ts and proxy.config.json. For instance, export const environment = { var: $ ...
Currently, I am creating an application in Visual Studio with the help of gulp and node. Node organizes all dependencies into a folder named node_modules. During the build process, gulp transfers these dependencies to a directory called libs within wwwroo ...
After setting up my Angular 7 Application, I integrated a large external library successfully. The only issue I encountered was with an event from this external source. An event listener in the external source triggers and sends data to my Angular App. e ...
I'm currently grappling with the concept of "entity arrays" in my ngrx Store. Let's say I have a collection of PlanDTO retrieved from my api server. Based on the research I've done, it seems necessary to set up a kind of "table" to store th ...
While my website functions perfectly on the development server, I encounter a strange error when I publish it to production on GitHub pages. Visiting the URL (yanshuf0.github.io/portfolio) displays the page without any issues. However, if I try to access y ...
Manually setting error validation in my form using setErrors is not providing clear errors upon submission. I do not want to reset all control errors to null, as this may cancel out other existing errors on the control. After setting the error once, I ne ...
My situation involves a routed component that looks like this: https://i.sstatic.net/ICHz4.png In Component A, I have an object obtained through an API. Currently, I have a button that redirects me to Component B. There is no direct parent-child relatio ...
I've been trying to insert a script from GameChanger () and they provided me with this code: <!-- Place this div wherever you want the widget to be displayed --> <div id="gc-scoreboard-widget-umpl"></div> <!-- Insert th ...
In my Node.js project, I am utilizing Typescript. When working with Express middleware, there is often a need to transform the Request object. Unfortunately, with Typescript, it can be challenging to track how exactly the Request object was transformed. If ...
I'm struggling to receive the promise from the backend after making a get request. Can anyone help me figure out what I might be doing wrong? makeLoginCall(_username: string, _password: string) { let promise = new Promise((resolve, reject) => ...
Below is an illustration of a data structure that I aim to define as a type in TypeScript: const dataExample = { Folder: { "Filename.js": { lines: { total: 100, covered: 80, ...