有一个 Angular 动态表单生成器 Bootstrap CSS 问题

Question

我正在尝试使用 Angular 7 基于 Angular's Dynamic Forms 模板的动态表单生成器，我运行遇到了 css 问题。我正在使用 Bootstrap 4.0，我希望这不是我需要回到 3.0 的问题（我之前有一个问题涉及到这个问题，但正确的重新编码让它在 4.0 中工作）。如果是这样，请告诉我。

现在，这是我的应用程序为我的最终产品正确工作的方式。我生成下拉菜单的代码是：

<div class="row">
  <div *ngFor="let question of questions" class="col-md-6 form-group">
    <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>
  </div>
</div>

当它呈现在屏幕上时，下拉菜单正确对齐，宽度正确，如您所见：

现在，如果我按照 Angular 的方法，我的主要代码块现在将变为：

<div class="row">
  <app-question *ngFor="let question of questions" [question]="question" [form]="form"></app-question>
</div>

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

<div [formGroup]="form">
  <div class="col-{{question.colType}}-{{question.colWidth}} form-group">
    <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>
  </div>
</div>

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

如您所见，列宽消失了。我确定它与包含 FormGroup 属性的 div 标记有关，但这是组件编译和工作所必需的。我试过用 span 标签添加它，将 col-md-6 class 添加到与 FormGroup 相同的标签，但我得到相同的，不正确的 CSS 渲染。

这是另一个 Bootstrap 4 问题，我可能需要转到 Bootstrap 3 才能正常工作吗？如果不是，这是怎么回事，我怎样才能让页面像第一张图片一样正确呈现，同时仍然能够在我的代码中使用应用程序问题组件？

Answer 1

我认为问题在于 Angular 将 app-question 组件呈现为标签 <app-question></app-question> 并且其中的 div 标签具有相对于 app-question 标签，但不是父标签 <div class="row">。因此，如果您添加 class col-md-6（例如），它将覆盖 app-question 标签的 50%，但不会覆盖 row 标签。

因此，如果您希望这些样式起作用，您应该在此处添加 classes

<div class="row">
  <app-question *ngFor="let question of questions"
         [question]="question"
         [form]="form"
         class="col-md-6"> 
  </app-question>
</div>

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

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

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

<div class="row">
   <div app-question
        *ngFor="let question of questions"
        [question]="question"
        [form]="form"
        class="col-md-6"> 
   </app-question>
</div>

有一个 Angular 动态表单生成器 Bootstrap CSS 问题

Having an Angular Dynamic Form Generator Bootstrap CSS Issue

css

dynamic-forms

bootstrap-4

angular