时间戳

首页 > 解决方案 > 有一个 Angular 动态表单生成器引导 CSS 问题

css - 有一个 Angular 动态表单生成器引导 CSS 问题

问题描述

我正在尝试使用 Angular 7 基于Angular 的动态表单模板的动态表单生成器，但我遇到了一个 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 类添加到与 FormGroup 相同的标签中，但我得到了相同的、不正确的 CSS 渲染。

这是另一个 Bootstrap 4 问题，我可能需要进入 Bootstrap 3 才能正常工作？如果没有，发生了什么，我怎样才能让页面像第一张图片一样正确呈现，但仍然能够在我的代码中使用 app-question 组件？

标签： cssangularbootstrap-4dynamic-forms

解决方案

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

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

<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>

推荐阅读