2016-01-13 6 views
9

私は以下のいくつかのコードがあります。YII2でActiveFieldのフォームグループdivにクラスを追加するには?

HTMLになり
<?= 
    $form->field($model, 'phone_no')->textInput(
    [ 
     'placeholder' => 
     '(Conditionally validated based on checkbox above, groovy!)' 
    ] 
) 
?> 

<div class="form-group field-contactform-phone_no"> 
    <label class="control-label">Phone No 
    <input type="text" aria-describedby="hint-contactform-phone_no" placeholder="(Conditionally validated based on checkbox above, groovy!)" name="ContactForm[phone_no]" id="contactform-phone_no" class=""></label> 
    <small class="error-box"></small> 
    <p class="help-text" id="hint-contactform-phone_no"></p> 
</div> 

私の質問は次のとおりです。

どのように私は(含む外側のdivに '見えない' クラスを追加することができますがクラス=現在のフォームグループ)?あなたは、単一のフィールドのために、このようにそれを行うことができます

ヘルプ

答えて

15

してくれてありがとう:(フォーム内のすべてのフィールドの場合)

<?= $form->field($model, 'phone_no', ['options' => ['class' => 'form-group invisible']) 
    ->textInput(['placeholder' => '(Conditionally validated based on checkbox above, groovy!)']) ?> 

グローバルそれはこのようなことが可能です:

<?php $form = ActiveForm::begin([ 
    'fieldConfig' => ['options' => ['class' => 'form-group invisible']], 
]); ?> 

することができますまた、条件付きfieldConfigを構築:

<?php $form = ActiveForm::begin([ 
    'fieldConfig' => function ($model, $attribute) { 
     if (...) { 
      return ['options' => ['class' => 'form-group invisible']], 
     } 
    }, 
]); ?> 

あなたはそれがあなたのカスタム1と合併していないので、同様form-groupクラスを含める必要が注意してください。

公式ドキュメント:

+0

おかげでクラスを定義することができます!今、それをjQueryでfadeInにする方法です(つまり、 'hide'要素を削除しますが、fadeIn要素を作成します)。それを探して、助けてくれてありがとうarogachev – gvanto

6

すべての入力要素のテンプレートのレイアウトを定義します。カスタムフィールドの

<?php 
       $form = ActiveForm::begin([ 
          'id' => 'purchase-sms-temp-form', 
          'layout' => 'horizontal', 
          'fieldConfig' => [ 
           'template' => " <div class=\"form-group form-md-line-input\">{label}\n{beginWrapper}\n{input}<div class=\"form-control-focus\"> </div>\n{error}\n</div>{endWrapper}", 
           'horizontalCssClasses' => [ 
            'label' => 'col-md-2 control-label', 
            'offset' => 'col-sm-offset-4', 
            'wrapper' => 'col-sm-10', 
            'error' => 'has-error', 
            'hint' => 'help-block', 
           ], 
          ], 
       ]); 
       ?> 

       <div class="form-body"> 
        <?= $form->field($model, 'mobile') ?> 
        <?= $form->field($model, 'volume') ?> 
        <?= $form->field($model, 'hospital_id') ?> 
        <?= $form->field($model, 'created_date') ?> 
        <?= $form->field($model, 'complete') ?> 
        <?= $form->field($model, 'modified_date') ?> 

       </div> 

あなたはかなり良い作品

$form->field($model, 'phone_no', [ 
      'options' => [ 
      'class' => 'form-group invisible' 
      ])->textInput([ 
       'placeholder' => '(Conditionally validated based on checkbox above, groovy!)']) ?> 
+0

フィールドコンテナにクラスを追加するだけのテンプレートを定義するのはなぜですか? 2番目のアプローチはすでに私の答えでカバーされています。 – arogachev

+0

['options' => ['class' => 'フォームグループが表示されません]]カスタムフィールドに閉じ括弧が1つもありません] –