FORMから角2の別のコンポーネントにデータを渡す

Question

1.データが入力されたら、nav.template.htmlのsubmitボタンのonClick。

2.FORMデータをproduct.component.tsに渡す必要があります。同じデータをproduct.template.htmlの表の中に挿入する必要があります。

3.Inインターフェイスのデータ型が定義され、product.data.jsというサービスに渡されます。

nav.component.ts

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

      @Component({ 
       moduleId: module.id, 
       selector: 'ng-nav', 
       inputs: ['products'], 
       templateUrl: 'nav.template.html' 
      }) 

      export class NavbarComponent { 
       productForm: boolean=false; 
       isNewForm: boolean; 
       rForm : FormGroup; 
       post : any; 
       fname : string = ''; 
       lname : string = ''; 
       email : string = ''; 
       phnum : number; 
       address : string = ''; 
       ZipCode : number; 
       state : string = ''; 
       country : string = ''; 
       fnameAlert : string = 'Maximum 10 characters'; 
       lnameAlert : string = 'Maximum 10 characters'; 
       emailAlert : string = 'Maximum 50 characters in e-mail format'; 
       phnumAlert : string = 'Maximum 10 digits'; 
       addressAlert : string = 'Maximum 100 characters'; 
       ZipCodeAlert : string = 'Maximum 10 characters'; 

       constructor(private fb:FormBuilder){ 
       this.rForm = fb.group({ 
        'fname':[null,Validators.compose([Validators.required,Validators.maxLength(10),Validators.minLength(3)])], 
        'lname':[null,Validators.compose([Validators.required,Validators.maxLength(10),Validators.minLength(3)])], 
        'email':[null,Validators.compose([Validators.required,Validators.maxLength(50)])], 
        'phnum':[null,Validators.compose([Validators.required,Validators.maxLength(10)])], 
        'address':[null,Validators.compose([Validators.required,Validators.maxLength(10)])], 
        'ZipCode':[null,Validators.compose([Validators.required,Validators.maxLength(6)])], 
        'state':[null,Validators.required], 
        'country':[null,Validators.required], 
        'validate' : '' 
       }); 
       } 
       addpost(post){ 
       this.fname = post.fname; 
       this.lname = post.lname; 
       this.email = post.email; 
       this.phnum = post.phnum; 
       this.address = post.address; 
       this.ZipCode = post.ZipCode; 
       } 

       // saveProduct(product: Product){ 

       // } 
      } 

nav.template.html

 <button (click)="showAddProductForm()"><i class="fa fa-plus add-plus-button"></i></button> 
     <div class="container"> 
      <form [formGroup]="rForm" (ngSubmit)="addPost(rForm.value)" *ngIf="productForm"> 
       <div class="form-container"> 
        <div class="form-style-1"> 
         <h2>Customer Details</h2> 
         <label>First Name<span class="required">*</span><input class="fname-holder" [(ngModel)]="newProduct.fname" type="text" formControlName="fname"/></label> 
         <div class="alert" *ngIf="!rForm.controls['fname'].valid && rForm.controls['fname'].touched">{{fnameAlert}}</div> 
         <label>Last Name<span class="required">*</span><input class="lname-holder" [(ngModel)]="newProduct.lname" type="text" formControlName="lname"/></label> 
         <div class="alert" *ngIf="!rForm.controls['lname'].valid && rForm.controls['lname'].touched">{{lnameAlert}}</div> 
         <label>Email <span class="required">*</span><input type="email" [(ngModel)]="newProduct.email" formControlName="email"/></label> 
         <div class="alert" *ngIf="!rForm.controls['email'].valid && rForm.controls['email'].touched">{{emailAlert}}</div> 
         <label>Phone <span class="required">*</span><input type="text" [(ngModel)]="newProduct.phnum" formControlName="phnum"/></label> 
         <div class="alert" *ngIf="!rForm.controls['phnum'].valid && rForm.controls['phnum'].touched">{{phnumAlert}}</div> 
         <label>Address <span class="required">*</span><textarea style="width: 319px;"type="address" [(ngModel)]="newProduct.id" formControlName="address"></textarea></label> 
         <div class="alert" *ngIf="!rForm.controls['address'].valid && rForm.controls['address'].touched">{{addressAlert}}</div> 
         <label>Zip Code <span class="required">*</span><input type="text" [(ngModel)]="newProduct.ZipCode" formControlName="ZipCode"/></label> 
         <div class="alert" *ngIf="!rForm.controls['ZipCode'].valid && rForm.controls['ZipCode'].touched">{{ZipCodeAlert}}</div> 
         <label>State <span class="required">*</span><input type="text" [(ngModel)]="newProduct.state" formControlName="state"/></label> 
         <label>Country <span class="required">*</span><input type="text" [(ngModel)]="newProduct.country" formControlName="country"/></label> 
         <input type="submit" style="width: 95px;" class="button button2" value="Submit" (click)="saveProduct(newProduct)" [disabled]="!rForm.valid"/> 
        </div> 
       </div> 
      </form> 
     </div> 

product.component.ts

import { Component, OnInit } from '@angular/core'; 
    import { Product} from './product'; 
    import { ProductService } from './product.service'; 

    @Component({ 
     moduleId: module.id, 
     selector: 'ng-product', 
     templateUrl: 'product.template.html' 
    }) 

    export class ProductComponent implements OnInit{ 

    products:Product[]; 
    productForm:boolean = false; 
    isNewForm:boolean; 

    constructor (private _productService:ProductService){} 

    ngOnInit(){ 
    this.getProducts(); 
    } 

    getProducts(){ 
     this.products = this._productService.getProductsFromData(); 
      } 

    removeProductForm(product: Product){ 
     this._productService.deleteProduct(product); 
    } 
    } 

product.template.html

<div> 
<div> 
    <div style="float: right;"><input class="filter-search" placeholder="Search..." type="text" [(ngModel)]="term"> 
     <i class="fa fa-search search-bar-icon"></i> 
     </div> 
<table> 
    <tr> 
     <th>First Name</th> 
     <th>Last Name</th> 
     <th>Email</th> 
     <th>Phone</th> 
     <th>Address</th> 
     <th>Zipcode</th> 
     <th>State</th> 
     <th>Country</th> 
     <th></th> 
     <th></th> 
    </tr> 
    <tr *ngFor="let product of products|filter:term"> 
     <td>{{product.fname}}</td> 
     <td>{{product.lname}}</td> 
     <td>{{product.email}}</td> 
     <td>{{product.phnum}}</td> 
     <td>{{product.address}}</td> 
     <td>{{product.ZipCode}}</td> 
     <td>{{product.state}}</td> 
     <td>{{product.country}}</td> 
     <td><i class="fa fa-edit" style="font-size:24px;color: #3eb0f7;" (click)="showEditProductForm(product)"></i></td> 
     <td><i class="fa fa-trash" style="font-size:24px;color: #ff3232;" (click)="removeProductForm(product)"></i></td> 
    </tr> 
    </table> 
</div> 

</div> 
<ng-nav [products]="products"></ng-nav> 

product.service.ts

import{Injectable} from '@angular/core'; 
import{Product} from './product'; 
import{PRODUCT_ITEMS} from './product.data'; 


@Injectable() 
export class ProductService { 
    private pItems = PRODUCT_ITEMS; 

    getProductsFromData():Product[]{ 
     console.log(this.pItems); 
     return this.pItems 

    } 

    deleteProduct(product: Product){ 
     this.pItems.splice(this.pItems.indexOf(product),1) 
    } 
} 

Answer 1

あなたはrxjsから件名やBehaviourSubject使用することができます。送信されたデータをObservableの次のメソッドに渡し、それを別のコンポーネントに登録すると、そこにデータが取得されます。

Answer 2

あなたのnewProductはproduct.component.tsに存在するはずです。双方向データバインディングの魔法によって、コンポーネントにデータがあります。サービスに送信する

..

export class ProductComponent implements OnInit{ 

products:Product[]; 
newProduct: Product; 

constructor (private _productService:ProductService){} 

ngOnInit(){ 
this.getProducts(); 
} 

onSubmit(){ 
    this._productService.addProduct(this.newProduct); 
}