Question

我正在使用Angular Material处理Angular。我的问题是如何在不编写任何外部CSS的情况下并排排列两个输入框？使用AngularJS，我们可以选择排列布局like so。但我没有弄清楚如何用Angular做到这一点。

Answer 1

我用以下json格式实现了这个目标：

orderFields: FormlyFieldConfig[] = [
    {
        fieldGroupClassName: 'flex-container',
        fieldGroup: [
            {
                className: 'mat-form-field',
                type: 'input',
                key: 'firstName',
                templateOptions: {
                  label: 'First Name',
                }
            },
            {
                className: 'mat-form-field ',
                type: 'input',
                key: 'lastName',
                templateOptions: {
                  label: 'Last Name',
                }

            },
            {
              className: 'mat-form-field',
              type: 'input',
              key: 'lastName',
              templateOptions: {
                label: 'Last Name',
              }
        }]
  }
];

这里的课程'mat-form-field'是并排安排输入的关键。

Answer 2

如果我确定你要求的是并排的两个输入。

您必须使用<tr>包装输入字段，并且对于每个堆叠输入，您必须使用<td>。如果这不是你要求的，请告诉我。

  <table class="example-full-width" cellspacing="0"><tr>
<td><mat-form-field class="example-full-width">
  <input matInput placeholder="City">
</mat-form-field></td>
<td><mat-form-field class="example-full-width">
  <input matInput placeholder="State">
</mat-form-field></td>
<td><mat-form-field class="example-full-width">
  <input matInput #postalCode maxlength="5" placeholder="Postal Code" value="94043">
  <mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint>
</mat-form-field></td>

以下是Multiple Inputs in a Row

的示例

使用角度形状和角度5使用材料设计并排排列两个输入框

2 个答案: