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

时间:2018-04-13 07:35:44

标签: angular angular-material angular-formly

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

2 个答案:

答案 0 :(得分: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'是并排安排输入的关键。

答案 1 :(得分:-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

的示例