Как я могу инициализировать реактивную форму Angular2 с помощью Observable?

Я могу придумать два варианта ...

Вариант 1:

Используйте * ngIf в HTML, который отображает форму что-то вроде

<form *ngIf="this.recipe">...</form>

Вариант 2: используйте async в шаблоне и создайте свою модель, например:

компонент

model: Observable<FormGroup>;    
...
this.model = store.select(recipeBuilderSelector)
    .startWith(someDefaultValue)
    .map((recipe: Recipe) => {
        return fb.group({
            foodName: [recipe.name],
            description: [recipe.description]
        })
    })

шаблон

<app-my-form [model]="(model | async)"></app-my-form>

Вам нужно будет подумать, как обрабатывать обновления магазина и текущей модели.

Хотя добавление еще одного уровня может показаться более сложным, гораздо проще иметь дело с наблюдаемыми, разделив один компонент на два: компонент контейнер и компонент презентационный.

Компонент контейнера имеет дело только с наблюдаемыми, а не с презентацией. Данные из любых наблюдаемых передаются компоненту представления через свойства @Input, и используется канал async:

@Component({
  selector: "recipe-container",
  template: `<recipe-component [recipe]="recipe$ | async"></recipe-component>`
})
export class RecipeContainer {

  public recipe$: Observable<any>;

  constructor(private store: Store<AppState>) {
    this.recipe$ = store.select(recipeBuilderSelector);
  }
}

Компонент представления получает простые свойства и не должен иметь дело с наблюдаемыми:

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: "recipe-component",
  template: `...`
})
export class RecipeComponent {

  public recipeForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.recipeForm = this.formBuilder.group({
      foodName: [""],
      description: [""]
    });
  }

  @Input() set recipe(value: any) {
    this.recipeForm.patchValue({
      foodName: value.name,
      description: value.description
    });
  }
}

Идея использования контейнерных и презентационных компонентов является общей концепцией Redux и объясняется в < em> Компоненты презентации и контейнеры.