Angular 2設置默認窗體控件值演示組件

Question

我在這裏有點迷路。我有一個使用商店架構（ngrx）並使用智能和演示組件構建的角度2應用程序。

在存儲和檢索數據方面，一切都運行良好，但是我在設置表示組件中的默認窗體控件值時被卡住了。它不能編譯，因爲該屬性不存在，這顯然是一個時間問題，因爲該屬性在第一次嘗試加載表單時不在那裏。

因此，只有在@Input（）客戶值可用後，如何在窗體控件中設置默認值或初始值。

演示組件

import { Component, OnInit, Input, Output, EventEmitter, ChangeDetectionStrategy} from '@angular/core'; 
import { FormBuilder, FormGroup, FormArray, Validators, FormControl } from "@angular/forms"; 

// Mojito Models 
import { CustomerModel } from '../../models/customer-model'; 

@Component({ 
    selector: 'mj-customer-detail', 
    templateUrl: './customer-detail.component.html', 
    styleUrls: ['./customer-detail.component.scss'], 
    changeDetection: ChangeDetectionStrategy.OnPush 
}) 
export class CustomerDetailComponent implements OnInit { 

    @Input() customer: CustomerModel; 
    @Output() showView: EventEmitter<string> = new EventEmitter<string>(); 

    customerForm: FormGroup; 

    constructor(private fb: FormBuilder) {} 

    ngOnInit() { 

    this.customerForm = this.fb.group({ 
     name: [this.customer.name, Validators.required], // This fails to compile 
     overview: ['', Validators.required], 
     imagePath: ['', Validators.required] 
    }); 

    } 

} 

模板

{{customer?.name}} **// This works fine it displays the customer name** 

<form [formGroup]="customerForm" (ngSubmit)="onSaveCustomer(contact)"> 

    <md-card class="demo-card demo-basic"> 
     <md-card-content> 
      <br> 
      <table style="width: 100%" cellspacing="0"> 
       <tr> 
        <td> 
         <img [src]="imagePath.value" class="card-image"> 
        </td> 
        <td> 
         <md-input-container style="width: 100%"> 
          <input mdInput placeholder="Image Url" style="width: 100%" formControlName="imagePath" type="text" id="imagePath" #imagePath/> 
         </md-input-container> 
        </td> 
       </tr> 
      </table> 

      <md-input-container style="width: 100%"> 
       <input mdInput placeholder="Name" style="width: 100%" formControlName="name" type="text" id="name" #name/> 
      </md-input-container> 
      <md-input-container style="width: 100%"> 
       <input mdInput placeholder="Overview" style="width: 100%" formControlName="overview" type="text" id="overview" #overview/> 
      </md-input-container> 

     </md-card-content> 
    </md-card> 

</form> 

智能構件

客戶組件

import { Component, OnInit } from '@angular/core'; 
import { Router } from "@angular/router"; 

// 3rd Party Modules 
import { Store } from '@ngrx/store'; 
import { Observable } from 'rxjs'; 

// Mojito Components 
import { ApplicationState } from '../../store/application-state'; 
import { CustomerEffects } from '../../store/effects/customers.effects'; 
import { ADD_CUSTOMER_SUCCESS, getCustomers, addCustomer, CustomerSelected } from '../../store/actions/customer.actions'; 
import { CustomerModel } from '../models/customer-model'; 


@Component({ 
    selector: 'mj-customer', 
    templateUrl: './customer.component.html', 
    styleUrls: ['./customer.component.scss'] 
}) 
export class CustomerComponent implements OnInit { 

    customers$: Observable<CustomerModel>; 
    customer$: Observable<CustomerModel>; 
    addCustomerSuccess$ : Observable<any>; 
    showView: string = 'list'; 

    constructor(private router: Router, private store: Store<ApplicationState>, private customerEffects : CustomerEffects) { 

    this.store.dispatch(getCustomers()); 
    this.customers$ = store.select("customers"); 
    this.customer$ = store.select("customer"); 

    this.addCustomerSuccess$ = this.customerEffects.addCustomer$.filter(({ type }) => type === ADD_CUSTOMER_SUCCESS); 

    } 

    addCustomer(customer: CustomerModel) { 

    this.store.dispatch(addCustomer(customer)); 

    } 

    ngOnInit() { 


    } 

    onSelectedCustomer(selectedCustomerId){ 

    this.store.dispatch(CustomerSelected(selectedCustomerId)); 

    } 

    changeView(viewType){ 

    this.showView = viewType; 

    } 

} 

客戶模板時，你得到的價值

<mj-customer-detail (showView)="changeView($event)" [hidden]="showView!='detail'" [customer]="customer$ |async"></mj-customer-detail> 

Answer 1

只需更新形式：

ngOnChanges() { 
    if(this.customer) { 
     this.customerForm.get('name').setValue(this.customer.name); 
    } 
    } 

    ngOnInit() { 
    this.customerForm = this.fb.group({ 
     name: [null, Validators.required], // This fails to compile 
     overview: ['', Validators.required], 
     imagePath: ['', Validators.required] 
    }); 
    }