Question

网上有很多关于使用Angular Material的建议，但我不想仅为一个组件安装该库。

按照逻辑布局here，我创建了一个完全可以作为侧边栏工作的组件。这个组件的HTML非常简单：

<div class='sidebar'>
    <ng-content></ng-content>
</div>

通过控制器和css处理大部分打开/关闭逻辑。

我现在面临的问题是，我有一个需要在桌面上始终可见的表单（非侧边栏视图），并且当宽度较小时，它会放在（上面）可关闭的侧边栏中。

网上的许多建议主要包括将内容放在侧边栏和常规流程中。然后根据宽度隐藏其中一个。但是这对表单来说真的很不方便，因为我需要同时为表单实例同步输入变量（在控制器中）。

我试图避免多次定义我的表单：一个用于侧边栏视图，另一个用于非侧边栏视图。理想情况下，我想只有一个<form></form>并在两个地方拥有它。但我无法弄清楚如何。

Answer 1

根据我的理解，您希望在侧边栏视图和非侧边栏视图中使用相同的表单模板。

我在这里做的是使用ReactiveForm并为不同的视图创建两个FormGroup （form_sidebar，form_nosidebar），创建另一个要用于的FormGroup您的表单（myform）并根据视图调用将 myform 的内容切换为其他两个的事件。

即

模板：

<form [formGroup]="myform">
<input type="text" formControlName="input_1">
<input type="text" formControlName="input_2">
</form>

<button (click)="nosidebarView()">Without Sidebar View</button>
<button (click)="sidebarView()">Sidebar View</button>

控制器：

myform: FormGroup;

constructor(private builder: FormBuilder) {

}

ngOninit(){
 myform= builder.group({
   input_1: '',
   input_2: '',
 });
}

Angular 5：如何创建响应式侧边栏？

1 个答案: