Отправка Реактивной формы, содержащей регистрацию и отправку, и отображение данных в Grid без использования сервиса, но с использованием маршрутизации - PullRequest
Новая
       9

Отправка Реактивной формы, содержащей регистрацию и отправку, и отображение данных в Grid без использования сервиса, но с использованием маршрутизации

0 голосов
/ 23 января 2020

У меня есть 2 компонента, зарегистрируйтесь и войдите в приложение angular, регистр является реактивной формой, и у входа есть столбцы сетки кендо. Я должен передать данные из регистрационной формы в столбец сетки после отправки без использования услуг. Данные хранятся в консоли, но не отображаются в полях сетки кендо.

register.component.ts 

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';


@Component({
    selector: 'app-register',
    templateUrl: './register.component.html',
    styleUrls: ['./register.component.css']
})

export class RegisterComponent implements OnInit {
    registerForm: FormGroup;
    submitted = false;
    loading = false;
    data: any;

    constructor(private formBuilder: FormBuilder, public router: Router, public route: ActivatedRoute) { }

    @Output() public found = new EventEmitter<any>();

    ngOnInit(){
        this.registerForm = this.formBuilder.group({
            'Name': ['', Validators.required],
            'MobileNo': ['', Validators.required],
            'DOB': ['', Validators.required],
            'BloodGroup': ['', Validators.required],
            'ECN': ['', Validators.required],
            'Address': ['', Validators.required],
            'PANNo': ['', Validators.required],
            'BAN': ['', Validators.required],
            'BankName': ['', Validators.required],
            'IFSC': ['', Validators.required],
            'email': ['', [Validators.required, Validators.email]],
            'Active': ['',Validators.required]
        });
        }

    get f() { return this.registerForm.controls; }

    onSubmit() {
        console.log(this.registerForm.value);
        let data: any = this.registerForm.value;
        alert('Form Submitted!! View Details?');

        this.router.navigate(['./login'],
            {
                queryParams: { data:(JSON.stringify(data)) }

            })
    }
}

register.component. html

<div class="login-wrapper" fxLayout="row" fxLayoutAlign="center center">
    <div class="jumbotron">
        <div class="container">
            <mat-card class="box">
                <mat-card-header>
                    <mat-card-title class="header"><span>Employee Register Form</span></mat-card-title>
                </mat-card-header>

                <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
                    <mat-card-content>

                        <div class="form-group">
                            <mat-form-field style="width:335px !important">
                                <input matInput placeholder="Name" formControlName="Name" class="form-control"
                                    [ngClass]="{ 'is-invalid': submitted && f.Name.errors }" />
                                <div *ngIf="submitted && f.Name.errors" class="invalid-feedback">
                                    <div *ngIf="f.Name.errors.required">Name is required</div>
                                </div>
                            </mat-form-field>
                        </div>

                        <div class="form-group">
                            <mat-form-field style="width:335px !important">
                                <input matInput placeholder="Mobile Number" formControlName="MobileNo"
                                    class="form-control" [ngClass]="{ 'is-invalid': submitted && f.MobileNo.errors }" />
                                <div *ngIf="submitted && f.MobileNo.errors" class="invalid-feedback">
                                    <div *ngIf="f.MobileNo.errors.required">Mobile No is required</div>

                                </div>
                            </mat-form-field>
                        </div>

                        <div class="form-group">
                            <mat-form-field style="width:335px !important">
                                <input matInput placeholder="Date of Birth" formControlName="DOB" class="form-control"
                                    [ngClass]="{ 'is-invalid': submitted && f.DOB.errors }" />
                                <div *ngIf="submitted && f.DOB.errors" class="invalid-feedback">
                                    <div *ngIf="f.DOB.errors.required">Date of Birth is required</div>
                                </div>
                            </mat-form-field>
                        </div>

                        <div class="form-group">
                            <mat-form-field style="width:335px !important">
                                <input matInput placeholder="Blood Group" formControlName="BloodGroup"
                                    class="form-control"
                                    [ngClass]="{ 'is-invalid': submitted && f.BloodGroup.errors }" />
                                <div *ngIf="submitted && f.BloodGroup.errors" class="invalid-feedback">
                                    <div *ngIf="f.BloodGroup.errors.required">Blood Group is required</div>
                                </div>
                            </mat-form-field>
                        </div>


                        <div class="form-group">
                            <mat-form-field style="width:335px !important">
                                <input matInput placeholder="Emergency Contact Number" formControlName="ECN"
                                    class="form-control" [ngClass]="{ 'is-invalid': submitted && f.ECN.errors }" />
                                <div *ngIf="submitted && f.ECN.errors" class="invalid-feedback">
                                    <div *ngIf="f.ECN.errors.required">Contact No is required</div>
                                </div>
                            </mat-form-field>
                        </div>


                        <div class="form-group">
                            <mat-form-field style="width:335px !important">
                                <input matInput placeholder="Address" formControlName="Address" class="form-control"
                                    [ngClass]="{ 'is-invalid': submitted && f.Address.errors }" />
                                <div *ngIf="submitted && f.Address.errors" class="invalid-feedback">
                                    <div *ngIf="f.Address.errors.required">Address is required</div>
                                </div>
                            </mat-form-field>
                        </div>


                        <div class="form-group">
                            <mat-form-field style="width:335px !important" color="red">
                                <input matInput placeholder="PAN Number" formControlName="PANNo" class="form-control"
                                    [ngClass]="{ 'is-invalid': submitted && f.PANNo.errors }" />
                                <div *ngIf="submitted && f.PANNo.errors" class="invalid-feedback">
                                    <div *ngIf="f.PANNo.errors.required">PAN Number is required</div>
                                </div>
                            </mat-form-field>
                        </div>

                        <div class="form-group">
                            <mat-form-field style="width:335px !important">
                                <input matInput placeholder="Bank Account Number" formControlName="BAN"
                                    class="form-control" [ngClass]="{ 'is-invalid': submitted && f.BAN.errors }" />
                                <div *ngIf="submitted && f.BAN.errors" class="invalid-feedback">
                                    <div *ngIf="f.BAN.errors.required">Account No is required</div>
                                </div>
                            </mat-form-field>
                        </div>


                        <div class="form-group">
                            <mat-form-field style="width:335px !important">
                                <input matInput placeholder="Bank Name" formControlName="BankName" class="form-control"
                                    [ngClass]="{ 'is-invalid': submitted && f.BankName.errors }" />
                                <div *ngIf="submitted && f.BankName.errors" class="invalid-feedback">
                                    <div *ngIf="f.BankName.errors.required">Bank Name is required</div>
                                </div>
                            </mat-form-field>
                        </div>


                        <div class="form-group">
                            <mat-form-field style="width:335px !important">
                                <input matInput placeholder="Bank IFSC Code" formControlName="IFSC" class="form-control"
                                    [ngClass]="{ 'is-invalid': submitted && f.IFSC.errors }" />
                                <div *ngIf="submitted && f.IFSC.errors" class="invalid-feedback">
                                    <div *ngIf="f.IFSC.errors.required">IFSC Code is required</div>
                                </div>
                            </mat-form-field>
                        </div>


                        <div class="form-group">
                            <mat-form-field style="width:335px !important">
                                <input matInput placeholder="Email ID" 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">
                                        <p>Enter Valid Email ID</p>
                                    </div>
                                </div>
                            </mat-form-field>
                        </div>

                        <div class="form-group">
                            <mat-form-field style="width:335px !important">
                                <input matInput placeholder="Active" formControlName="Active" class="form-control"
                                    [ngClass]="{ 'is-invalid': submitted && f.Active.errors }" />
                                <div *ngIf="submitted && f.Active.errors" class="invalid-feedback">
                                    <div *ngIf="f.Active.errors.required">Active is required</div>
                                </div>
                            </mat-form-field>
                        </div>

                        <div class="form-group">
                        <button mat-stroked-button color="warn" class="btn-block">
                                <p>Register</p>
                            </button>
                        </div>
                    </mat-card-content>
                </form>
            </mat-card>
        </div>
    </div>
</div>

login.component.ts 

import { Component, OnInit, Input } from '@angular/core';
import { Router, ActivatedRoute} from '@angular/router';
import { Details } from './detail';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-log-in',
  templateUrl: './log-in.component.html',
  styleUrls: ['./log-in.component.css']
})
export class LogInComponent implements OnInit {
  data:any;
  registerForm: FormGroup;

  constructor (public router: Router, public route: ActivatedRoute, public formBuilder: FormBuilder) { }

  ngOnInit(){

  this.route.queryParams.subscribe((params)=>{
    this.data=JSON.parse(params.data);
    console.log(params);
  })
}
}

login.component. html

<div class="grid">
  <kendo-grid #grid [data]="registerForm" [height]="550" [pageable]="true" 
           [navigable]="true">

          <kendo-grid-column field="Name" title="Name">
          </kendo-grid-column>
          <kendo-grid-column field="MobileNo" title="Mobile Number">
          </kendo-grid-column>
          <kendo-grid-column field="DOB" editor="date" title="Date of Birth">
          </kendo-grid-column>
          <kendo-grid-column field="BloodGroup" title="Blood Group">
          </kendo-grid-column>
          <kendo-grid-column field="ECN" title="Emergency Contact">
          </kendo-grid-column>
          <kendo-grid-column field="Address" title="Address">
          </kendo-grid-column>
          <kendo-grid-column field="PANNo" title="PAN Number">
          </kendo-grid-column>
          <kendo-grid-column field="BAN" title="Bank Account Number">
          </kendo-grid-column>
          <kendo-grid-column field="BankName" title="Bank Name">
          </kendo-grid-column>
          <kendo-grid-column field="IFSC" title="Bank IFSC code">
          </kendo-grid-column>
          <kendo-grid-column field="email" title="Email ID">
          </kendo-grid-column>
          <kendo-grid-column field="Active" title="Active">
          </kendo-grid-column>

  </kendo-grid>
</div>

app-routing.module.ts 

import { NgModule } from '@angular/core';
import { Routes, RouterModule} from '@angular/router';
import { LogInComponent } from './log-in/log-in.component';
import { RegisterComponent } from './register/register.component';

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'register' },
  { path: 'login', component: LogInComponent },
  { path: 'register', component: RegisterComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export class AppRoutingModule { }

app.component.ts 

<div fxLayout="column" fxFlexFill>
  <app-header> <mat-toolbar color="primary" class="app-header.sm">
  <div class="company"><a href="http://www.google.com/"  target="_blank" color="white"><p>Company Name</p></a>
 </div>
  <span class="space"></span>

  <span class="nav-tool-items">
    <a mat-button routerLink="register" routerLinkActive="active" >REGISTER</a>
    <a mat-button routerLink="login" routerLinkActive="active"> DETAILS</a>
  </span>

</mat-toolbar>
  </app-header>

  <div fxFlex>
<router-outlet></router-outlet>
  </div>

  <app-footer>
<mat-toolbar color="primary" class="app-footer.sm">
  <div class="footer">
 </div>
</mat-toolbar>
</app-footer>
</div>

app. компонент. html

<div fxLayout="column" fxFlexFill>
  <app-header> <mat-toolbar color="primary" class="app-header.sm">
  <div class="company"><a href="http://www.google.com/"  target="_blank" color="white"><p>Company Name</p></a>
 </div>
  <span class="space"></span>

  <span class="nav-tool-items">
    <a mat-button routerLink="register" routerLinkActive="active" >REGISTER</a>
    <a mat-button routerLink="login" routerLinkActive="active"> DETAILS</a>
  </span>

</mat-toolbar>
  </app-header>

  <div fxFlex>
<router-outlet></router-outlet>
  </div>

  <app-footer>
<mat-toolbar color="primary" class="app-footer.sm">
  <div class="footer">
 </div>
</mat-toolbar>
</app-footer>
</div>

1 Ответ

0 голосов
/ 23 января 2020

В Angular> = 7.2.0 вы можете передавать данные в состоянии 

this.router.navigate(['/login'], {state: {data: {...}}});

Данные будут храниться в: 

history.state.data
...