Angular2：建議將ngrx流直接連接到Form的方式？

Angular2：建議將ngrx流直接連接到Form的方式？Angular2：建議將ngrx流直接連接到Form的方式？

我檢查了網頁，我能找到的最好的方法是找到最佳做法，將ngrx流連接成反應形式。這是我迄今發現：

@Component({ 
    template: `<dumb-component [form]="form" [data]="data$ | async"></dumb-component>` 
}) 
class SmartComponent { 
    public data$ = this._store.let(someSelector$()); 

    public form = new FormGroup({ 
    foo: new FormControl(''), 
    bar: new FormControl('') 
    }); 

    constructor(private _store: Store<IState>) {} 
} 

@Component({ 
    template: ` 
    <form [formGroup]="form"> 
     <input type="text" formControlName="foo" /> 
     <input type="text" formControlName="bar" /> 
    </form> 
    ` 
}) 
class DumbComponent { 
    @Input() 
    public form: FormGroup; 

    @Input() 
    set data(v) { 
    if (v) { 
     this.form.patchValue(v); 
    } 
    }; 
}

問候，

肖恩

來源

2017-02-04 born2net

請在您的問題中編輯關聯問題中推薦的任何練習的示例。 – cartant

我不會將FormGroup作爲參數傳遞給DumbComponent。我會傳遞一個對象並從中創建formGroup。 – cgatian

使用智能和愚蠢的組件是一種方式，但將'FormGroup'傳遞給啞組件看起來有點臭 - 對我來說。 – cartant

爲了配合這些東西在評論中已經說過，我不會通過FormGroup。

更多的東西像這應該工作：

@Component({ 
    template: `<dumb-component (mySubmit)="handleSubmit($event)" [data]="data$ | async"></dumb-component>` 
}) 
class SmartComponent { 
    public data$ = this._store.let(someSelector$()); 

    constructor(private _store: Store<IState>) {} 

    handleSubmit(obj: any) { 
     this._store.dispatch(...); 
    } 
} 

@Component({ 
    template: ` 
     <form [formGroup]="form"> 
      <input type="text" formControlName="foo" /> 
      <input type="text" formControlName="bar" /> 
     </form> 
    ` 
}) 
class DumbComponent { 
    public form: FormGroup; 
    @Output mySubmit = new EventEmitter<any>(); 

    constructor(private fb: FormBuilder) { 
     form = this.fb.group({ 
      foo: '', 
      bar: '' 
     }); 
    } 

    onSubmit() { 
     if (this.form.valid) { 
      this.mySubmit.emit(this.form.value); 
     } 
    } 

    @Input() 
    set data(v) { 
     if (v) { 
      this.form.patchValue(v); 
     } 
    }; 
}

智能型組件將處理從店裏拉，並把它放回店裏。

來源

2017-02-06 17:57:25

Angular2：建議將ngrx流直接連接到Form的方式？

回答

相關問題