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