如何使用Angular和Bootstrap将表单字段分成两列。

huangapple
go评论103阅读模式
英文:

how to make the total form fields into two column using Angular and bootstrap

问题

以下是您提供的代码的翻译：

我在Bootstrap模态框中有一个Angular表单，我希望所有字段都分成两列，但根据我的代码，它没有生成预期的输出。我将解释我的代码如下。

  1. <div id="myCouponModal" class="modal fade">
  2.     <div class="modal-dialog modal-lg">
  3.         <div class="modal-content">
  4.             <div class="modal-header">
  5.                 <div class="icon-box">
  6.                     <i class="material-icons">&#xE5CD;</i>
  7.                 </div>				
  8.                 <h4 class="modal-title">优惠券</h4>	
  9.                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  10.             </div>
  11.             <div class="modal-body">
  12.                 <div class="row">
  13.                     <div class="col-md-12">
  14.                         <!-- div starts -->
  15.                         <form class="form-inline" role="form">
  16.                             <div>
  17.                                 <div class="section">
  18.                                     <div class="help-content">
  19.                                         <h5>优惠码：HOLI123</h5>
  20.                                     </div>
  21.                                     <div class="form-content">
  22.                                         <div class="form-field">
  23.                                             <mat-form-field appearance="outline">
  24.                                                 <mat-label>规则名称</mat-label>
  25.                                                 <input matInput placeholder="规则名称" #RuleName required>
  26.                                             </mat-form-field>
  27.                                             <mat-form-field appearance="outline">
  28.                                                 <mat-label>优惠券代码</mat-label>
  29.                                                 <input matInput placeholder="优惠券代码" 
  30.                                                 #CouponCode maxlength="30" pattern="[a-zA-Z0-9]+" (keyup)="makeCaps($event)" required>
  31.                                             </mat-form-field>
  32.                                             <mat-form-field appearance="outline">
  33.                                                 <mat-label>优惠券类别</mat-label>
  34.                                                 <select matNativeControl required (change)="getItemsAsPerCategory($event)"  #CouponCategory>
  35.                                                     <option value="">选择优惠券类别</option>
  36.                                                     <option value=Product>产品</option>
  37.                                                     <option value=Store>商店</option>
  38.                                                     <!-- <option value=Category>类别</option> -->
  39.                                                 </select>
  40.                                             </mat-form-field>
  41.                                             <mat-form-field appearance="outline">
  42.                                                 <mat-label>优惠券价值</mat-label>
  43.                                                 <input matInput placeholder="优惠券价值" 
  44.                                                 #CouponValue maxlength="15" pattern="[0-9]+" required>
  45.                                             </mat-form-field>
  46.                                             <mat-form-field appearance="outline">
  47.                                                 <mat-label>开始日期</mat-label>
  48.                                                 <input matInput [matDatepicker]="picker" placeholder="mm/dd/yyyy" readonly>
  49.                                                 <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  50.                                                 <mat-datepicker #picker></mat-datepicker>
  51.                                             </mat-form-field>
  52.                                             <mat-form-field appearance="outline">
  53.                                                 <mat-label>最低购物车价值</mat-label>
  54.                                                 <input matInput placeholder="最低购物车价值"  
  55.                                                 #maxDisValue maxlength="15" pattern="[0-9]+" required>
  56.                                             </mat-form-field>
  57.                                         </div>
  58.                     
  59.                                         <div class="form-field">
  60.                                             <mat-form-field appearance="outline">
  61.                                                 <mat-label>优惠券类型</mat-label>
  62.                                                 <select matNativeControl required  #Type>
  63.                                                     <option value="">选择优惠券类型</option>
  64.                                                     <option value=Flat>固定金额</option>
  65.                                                     <option value=percentage>百分比</option>
  66.                                                 </select>
  67.                                             </mat-form-field>
  68.                                             <mat-form-field appearance="outline">
  69.                                                 <mat-label>优惠券数量</mat-label>
  70.                                                 <input matInput placeholder="优惠券数量" 
  71.                                                 #Count maxlength="15" pattern="[0-9]+" required>
  72.                                             </mat-form-field>
  73.                                             <mat-form-field appearance="outline">
  74.                                                 <mat-label>优惠券描述</mat-label>
  75.                                                 <input matInput placeholder="优惠券描述" #CouponDescription required>
  76.                                             </mat-form-field>
  77.                                             <mat-form-field appearance="outline">
  78.                                                 <mat-label>最大折扣值</mat-label>
  79.                                                 <input matInput placeholder="最大折扣值" 
  80.                                                 #maxDisValue maxlength="15" pattern="[0-9]+" required>
  81.                                             </mat-form-field>
  82.                                             <mat-form-field appearance="outline">
  83.                                                 <mat-label>结束日期</mat-label>
  84.                                                 <input matInput [matDatepicker]="picker1" placeholder="mm/dd/yyyy" readonly>
  85.                                                 <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
  86.                                                 <mat-datepicker #picker1></mat-datepicker>
  87.                                             </mat-form-field>
  88.                                         </div>
  89.                                     </div>
  90.                                 </div>
  91.                             </div>
  92.                         </form>
  93.                         <!-- div starts -->
  94.                     </div>
  95.                 </div>
  96.             </div>
  97.             <div class="modal-footer">
  98.                 <button type="button" class="btn btn-info" data-dismiss="modal">取消</button>
  99.                 <button type="button" class="btn btn-danger" (click)="deleteProductItem()">删除</button>
  100.             </div>
  101.         </div>
  102.     </div>
  103. </div>

在这里，我有一些带有部分标题的字段，根据这个代码，它们都在同一列中显示。我需要将部分标题放在左侧，右侧的所有字段分成两列。

英文:

I have a angular form inside bootstrap modal and i need all the fields will be devided into two columns but as per my code its not generating the output as expected. I am explaining my code below.

  1. &lt;div id=&quot;myCouponModal&quot; class=&quot;modal fade&quot;&gt;
  2. &lt;div class=&quot;modal-dialog modal-lg&quot;&gt;
  3. &lt;div class=&quot;modal-content&quot;&gt;
  4. &lt;div class=&quot;modal-header&quot;&gt;
  5. &lt;div class=&quot;icon-box&quot;&gt;
  6. &lt;i class=&quot;material-icons&quot;&gt;&amp;#xE5CD;&lt;/i&gt;
  7. &lt;/div&gt;				
  8. &lt;h4 class=&quot;modal-title&quot;&gt;Coupons&lt;/h4&gt;	
  9. &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/button&gt;
  10. &lt;/div&gt;
  11. &lt;div class=&quot;modal-body&quot;&gt;
  12. &lt;div class=&quot;row&quot;&gt;
  13. &lt;div class=&quot;col-md-12&quot;&gt;
  14. &lt;!-- div starts --&gt;
  15. &lt;form class=&quot;form-inline&quot; role=&quot;form&quot;&gt;
  16. &lt;div&gt;
  17. &lt;div class=&quot;section&quot;&gt;
  18. &lt;div class=&quot;help-content&quot;&gt;
  19. &lt;h5&gt;Coupon code: HOLI123&lt;/h5&gt;
  20. &lt;/div&gt;
  21. &lt;div class=&quot;form-content&quot;&gt;
  22. &lt;div class=&quot;form-field&quot;&gt;
  23. &lt;mat-form-field appearance=&quot;outline&quot;&gt;
  24. &lt;mat-label&gt;Rule Name&lt;/mat-label&gt;
  25. &lt;input matInput placeholder=&quot;Rule Name&quot; #RuleName required&gt;
  26. &lt;/mat-form-field&gt;
  27. &lt;mat-form-field appearance=&quot;outline&quot;&gt;
  28. &lt;mat-label&gt;Coupon Code&lt;/mat-label&gt;
  29. &lt;input matInput placeholder=&quot;Coupon Code&quot; 
  30. #CouponCode maxlength=&quot;30&quot; pattern=&quot;[a-zA-Z0-9]+&quot; (keyup)=&quot;makeCaps($event)&quot; required&gt;
  31. &lt;/mat-form-field&gt;
  32. &lt;mat-form-field appearance=&quot;outline&quot;&gt;
  33. &lt;mat-label&gt;Coupon Category&lt;/mat-label&gt;
  34. &lt;select matNativeControl required (change)=&quot;getItemsAsPerCategory($event)&quot;  #CouponCategory&gt;
  35. &lt;option value=&quot;&quot;&gt;Select Coupon Category&lt;/option&gt;
  36. &lt;option value=Product&gt;Product&lt;/option&gt;
  37. &lt;option value=Store&gt;Store&lt;/option&gt;
  38. &lt;!--&lt;option value=Category&gt;Category&lt;/option&gt; --&gt;
  39. &lt;/select&gt;
  40. &lt;/mat-form-field&gt;
  41. &lt;mat-form-field appearance=&quot;outline&quot;&gt;
  42. &lt;mat-label&gt;Coupon Value&lt;/mat-label&gt;
  43. &lt;input matInput placeholder=&quot;Coupon Value&quot; 
  44. #CouponValue maxlength=&quot;15&quot; pattern=&quot;[0-9]+&quot; required&gt;
  45. &lt;/mat-form-field&gt;
  46. &lt;mat-form-field appearance=&quot;outline&quot;&gt;
  47. &lt;mat-label&gt;Start Date&lt;/mat-label&gt;
  48. &lt;input matInput [matDatepicker]=&quot;picker&quot; placeholder=&quot;mm/dd/yyyy&quot; readonly&gt;
  49. &lt;mat-datepicker-toggle matSuffix [for]=&quot;picker&quot;&gt;&lt;/mat-datepicker-toggle&gt;
  50. &lt;mat-datepicker #picker&gt;&lt;/mat-datepicker&gt;
  51. &lt;/mat-form-field&gt;
  52. &lt;mat-form-field appearance=&quot;outline&quot;&gt;
  53. &lt;mat-label&gt;Min Cart Value&lt;/mat-label&gt;
  54. &lt;input matInput placeholder=&quot;Min Cart Value&quot;  
  55. #maxDisValue maxlength=&quot;15&quot; pattern=&quot;[0-9]+&quot; required&gt;
  56. &lt;/mat-form-field&gt;
  57. &lt;/div&gt;
  58. &lt;div class=&quot;form-field&quot;&gt;
  59. &lt;mat-form-field appearance=&quot;outline&quot;&gt;
  60. &lt;mat-label&gt;Coupon Type&lt;/mat-label&gt;
  61. &lt;select matNativeControl required  #Type&gt;
  62. &lt;option value=&quot;&quot;&gt;Select Coupon Type&lt;/option&gt;
  63. &lt;option value=Flat&gt;Flat&lt;/option&gt;
  64. &lt;option value=percentage&gt;Percentage&lt;/option&gt;
  65. &lt;/select&gt;
  66. &lt;/mat-form-field&gt;
  67. &lt;mat-form-field appearance=&quot;outline&quot;&gt;
  68. &lt;mat-label&gt;Coupon Count&lt;/mat-label&gt;
  69. &lt;input matInput placeholder=&quot;Coupon Count&quot; 
  70. #Count maxlength=&quot;15&quot; pattern=&quot;[0-9]+&quot; required&gt;
  71. &lt;/mat-form-field&gt;
  72. &lt;mat-form-field appearance=&quot;outline&quot;&gt;
  73. &lt;mat-label&gt;Coupon Description&lt;/mat-label&gt;
  74. &lt;input matInput placeholder=&quot;Coupon Description&quot; #CouponDescription required&gt;
  75. &lt;/mat-form-field&gt;
  76. &lt;mat-form-field appearance=&quot;outline&quot;&gt;
  77. &lt;mat-label&gt;Max Discount Value&lt;/mat-label&gt;
  78. &lt;input matInput placeholder=&quot;Max Discount Value&quot; 
  79. #maxDisValue maxlength=&quot;15&quot; pattern=&quot;[0-9]+&quot; required&gt;
  80. &lt;/mat-form-field&gt;
  81. &lt;mat-form-field appearance=&quot;outline&quot;&gt;
  82. &lt;mat-label&gt;End Date&lt;/mat-label&gt;
  83. &lt;input matInput [matDatepicker]=&quot;picker1&quot; placeholder=&quot;mm/dd/yyyy&quot; readonly&gt;
  84. &lt;mat-datepicker-toggle matSuffix [for]=&quot;picker1&quot;&gt;&lt;/mat-datepicker-toggle&gt;
  85. &lt;mat-datepicker #picker1&gt;&lt;/mat-datepicker&gt;
  86. &lt;/mat-form-field&gt;
  87. &lt;/div&gt;
  88. &lt;/div&gt;
  89. &lt;/div&gt;
  90. &lt;/div&gt;
  91. &lt;/form&gt;
  92. &lt;!-- div starts --&gt;
  93. &lt;/div&gt;
  94. &lt;/div&gt;
  95. &lt;/div&gt;
  96. &lt;div class=&quot;modal-footer&quot;&gt;
  97. &lt;button type=&quot;button&quot; class=&quot;btn btn-info&quot; data-dismiss=&quot;modal&quot;&gt;Cancel&lt;/button&gt;
  98. &lt;button type=&quot;button&quot; class=&quot;btn btn-danger&quot; (click)=&quot;deleteProductItem()&quot;&gt;Delete&lt;/button&gt;
  99. &lt;/div&gt;
  100. &lt;/div&gt;
  101. &lt;/div&gt;
  102. &lt;/div&gt;

Here I have some fields with section header and as per this code its coming like the below image.

如何使用Angular和Bootstrap将表单字段分成两列。

Here all fields are coming in same column. I need the section header should place left and in right section all the fields will be divided into two columns.

答案1

得分: 3

你需要将你的表单分成两列。

  1.  <div class="row">
  2. <div class="col-md-6">
  3. 左侧字段
  4. </div>
  5. <div class="col-md-6">
  6. 右侧字段
  7. </div>
  8. </div>
英文:

You need to split your form in two columns

  1.  div class = row
  2. div class col-md-6
  3. your left fields
  4. div class col-md-6
  5. your rights fields

huangapple
  • 本文由 发表于 2020年1月3日 17:14:59
  • 转载请务必保留本文链接：https://go.coder-hub.com/59575828.html
  • angular
  • angular-material
  • twitter-bootstrap
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定