Angular Dynamic Form Generator Bootstrap CSS问题


Having an Angular Dynamic Form Generator Bootstrap CSS Issue

我正在尝试使用Angular 7基于Angular的Dynamic Forms模板的动态表单生成器，但遇到了CSS问题。我正在使用Bootstrap 4.0，但我希望这不是我需要回到3.0的问题(我以前有一个相关的问题，但是正确的重新编码使其可以在4.0中使用)。如果是这样，请告诉我。

现在，这是我的应用程序可以为我的最终产品正常运行的方式。我生成下拉列表的代码是：

1
2
3
4
5
6
7
8
9
10
    <label for="{{question.key}}">{{question.label}}</label>
    <span [ngSwitch]="question.controlType">
      <select *ngSwitchCase="'dropdown'"
        [id]="question.key"
        [formControlName]="question.key"
        [className]="question.fieldClass">
        <option *ngFor="let opt of question.options" [ngValue]="opt.value">{{opt.name}}</option>
      </select>
    </span>
    <span class="help-block error" *ngIf="isFormTouchedAndInvalid(question.key)">{{question.label}} is invalid</span>

将其渲染到屏幕上时，下拉列表将正确对齐，并具有正确的宽度，如您所见：

enter

1
  </app-question>

我的应用程序问题组件具有以下代码：

1
2
3
4
5
6
7
8
9
10
11
    <label for="{{question.key}}">{{question.label}}</label>
    <span [ngSwitch]="question.controlType">
      <select *ngSwitchCase="'dropdown'"
        [id]="question.key"
        [formControlName]="question.key"
        [className]="question.fieldClass"
        >
        <option *ngFor="let opt of question.options" [ngValue]="opt.value">{{opt.name}}</option>
      </select>
    </span>
    <span class="help-block error" *ngIf="isFormTouchedAndInvalid(question.key)">{{question.label}} is invalid</span>

当表单呈现到屏幕上时，它看起来像这样：

enter

相关讨论

我认为问题在于Angular将app-question组件渲染为标签</app-question>，并且其中的div标签具有相对于该app-question标签的样式，但没有其父的样式。因此，如果添加一个类col-md-6(例如)，它将覆盖app-question标记的50％，但不能覆盖row标记。

因此，如果您希望样式起作用，则应在此处添加类

1
2
3
4
5
  <app-question *ngFor="let question of questions"
         [question]="question"
         [form]="form"
         class="col-md-6">
  </app-question>

作为替代方案，您可以更改您的app-question组件装饰器以使其成为属性。

1
2
3
@Component({
  selector: '[app-question]'
})

然后将其用于您喜欢的任何标签

1
2
3
4
5
6
   <div app-question
        *ngFor="let question of questions"
        [question]="question"
        [form]="form"
        class="col-md-6">
   </app-question>
相关讨论