Angular 8Php

Angular 8 with php tutorial

Angular 8 with php tutorial part 2
Views

Hello to all, welcome to therichpost.com. Today I am starting, Angular 8 with php tutorial and this is the part 1. In this, I will tell you, bootstrap form integration in Angular 8 with proper validations.

Angular 8 with php tutorial
Angular 8 with php tutorial

I will tell you, all the steps to install and setup angular 8 and bootstrap 4 on your local machine. This is the first part of my Angular 8 with php tutorial. In other words this will be the complete angular php tutorial.

In this, however we will make form in bootstrap 4 and apply validations with angular 8 .

Angular 8 form validation
Angular 8 form validation

Here are the steps and please follow carefully:

1. Here are the basics commands to install angular 8 on your system:

npm install -g @angular/cli 

ng new angularpopup //Create new Angular Project

$ cd angularpopup // Go inside the Angular Project Folder

ng serve --open // Run and Open the Angular Project

http://localhost:4200/ // Working Angular Project Url

 

2. After done with above, you need to run below commands to set bootstrap environment into your angular 8 application:

npm install --save bootstrap

 

3. Now you need to add below code into your angular.json file:

...
"styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
          ],
"scripts": ["node_modules/bootstrap/dist/js/bootstrap.min.js"]
...

 

4. Now you need to add below code into your src/app/app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

5. Now you need to add below code into your src/app/app.component.ts file:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  registerForm: FormGroup;
  submitted = false;
  constructor(private formBuilder: FormBuilder) { }
  ngOnInit() {
    this.registerForm = this.formBuilder.group({
        email: ['', [Validators.required, Validators.email]],
        password: ['', [Validators.required, Validators.minLength(6)]],
        firstname: ['', [Validators.required, Validators.minLength(6)]],
        mobile: ['', [Validators.required, Validators.pattern(/^-?(0|[1-9]\d*)?$/), Validators.minLength(10)]]
    });
}
// convenience getter for easy access to form fields
get f() { return this.registerForm.controls; }
onSubmit() {
    this.submitted = true;
    // stop here if form is invalid
    if (this.registerForm.invalid) {
        return;
    }
}
}

 

6. Now you need to add below code into src/app/app.component.html file:

<div class="container">
      <h1 class="text-center">Angular 8 with php tutorial part 1</h1>
    <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
                        <div class="row">
                           <div class="col-sm-6">
                              <div class="form-group">
                                    <label>FirstName</label>
                                    <input type="text" formControlName="firstname" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.firstname.errors }" />
                                    <div *ngIf="submitted && f.firstname.errors" class="invalid-feedback">
                                          <div *ngIf="f.firstname.errors.required">FirstName is required</div>
                                    </div>
                                 </div>
                           </div> 
                           <div class="col-sm-6">
                              <div class="form-group">
                                 <label>Email</label>
                                 <input type="text" formControlName="email" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.email.errors }" />
                                 <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>
                              </div>
                           </div>
                           <div class="col-sm-6">
                                 <div class="form-group">
                                    <label>Mobile</label>
                                    <input type="text" formControlName="mobile" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.mobile.errors }" />
                                    <div *ngIf="submitted && f.mobile.errors" class="invalid-feedback">
                                       <div *ngIf="f.mobile.errors">Mobile must be Valid and at least 10 digits</div>
                                      
                                    </div>
                                 </div>
                              </div>
                           <div class="col-sm-6">
                              <div class="form-group">
                                 <label>Password</label>
                                 <input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
                                 <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>
                              </div>
                           </div>
               </div>
               <button type="submit" class="btn btn-primary">Submit</button>
                  </form>
</div>

 

After that, In my next post or I can say, in second part of this tutorial, I will tell you, how we can save angular 8 form data in php mysql database. If you have any suggestions then please write in comments below.

In the end, don’t forgot to run ng serve command. If you have any query then do comment below.

Jassa

Thank you.

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Positive SSL