einige weitere Felder zum Formular in yii2 Ajax

Question

eine Yii2 form Ich habe Hinzufügen:

<?php $form = ActiveForm::begin(['id' => 'que']); ?> 
    <?php echo $form->field($model, 'type') 
      ->dropDownList($questionTypes, [ 
       'class' => 'form-control ng-pristine ng-valid ng-touched', 
       'prompt' => 'Select question type', 
       'ng-model' => 'que.type', 
       'ng-change' => 'addAnswerOptions(que);', 
     ]); 
    ?> 
<?php ActiveForm::end(); ?> 

Auf der Grundlage von ausgewählten Drop-Down-Wert, ich habe einige weitere Felder in die gleiche Form des gleichen Modells hinzuzufügen. Welche Felder hinzugefügt werden, hängt vollständig vom Dropdown-Wert ab.

Wie kann ich das tun?

Answer 1

Aus den Informationen, die Sie hier geben, ist, was ich vorschlagen würde.

1) Dynamisch - kein AJAX

mit allen Feldern, die Sie gerade enthalten Erstellen Sie Ihre Form benötigen, folgt jeder "Szenario" in einem separaten div mag:

<?php $form = ActiveForm::begin(['id' => 'que']); ?> 
    <?php echo $form->field($model, 'type') 
      ->dropDownList($questionTypes, [ 
       'class' => 'form-control ng-pristine ng-valid ng-touched', 
       'prompt' => 'Select question type', 
       'ng-model' => 'que.type', 
       'ng-change' => 'addAnswerOptions(que);', 
     ]); 
    ?> 
    <div class="form-option" data-type="class" style="display:none;"> 
     <?php 
      // ... fields here for case type == class 
     ?> 
    </div> 
    <div class="form-option" data-type="prompt" style="display:none;"> 
     <?php 
      // ... fields here for case type == prompt 
     ?> 
    </div> 
    <div class="form-option" data-type="ng-model" style="display:none;"> 
     <?php 
      // ... fields here for case type == ng-model 
     ?> 
    </div> 
    <div class="form-option" data-type="ng-change" style="display:none;"> 
     <?php 
      // ... fields here for case type == ng-change 
     ?> 
    </div> 
<?php ActiveForm::end(); ?> 

Dann werden Sie wollen, um Javascript-Code zu registrieren, um die richtigen Blöcke anzuzeigen, abhängig davon, welche Dropdown-Option ausgewählt wurde. Bellow ist ein Beispiel unter Verwendung von JQuery:

$(document).ready(function(){ 
    $('select.form-control').change(function(){ 
     $('.form-option').hide(); // hide all options if an option is showing 
     var index = $('select.form-control').index(); 
     $('div[data-type="'+index+'"]').show(); //show the correct fields 
    }); 
}); 

Wenn du gehst, diesen Weg zu gehen ich Sie AJAX validation für Ihr Formular verwenden vorschlagen. Es wird vermieden, dass Sie beim erneuten Laden der Seite Kopfschmerzen haben müssen.

Sobald Ihr Formular eingereicht wurde, müssen Sie jeden Fall in Ihrem Controller behandeln. Sie können entweder eine einfache Menge von if() Anweisungen verwenden, die den Dropdown-Wert überprüfen. Oder Sie können Ihr Modell validation scenario entsprechend dem Dropdown-Wert einstellen.

Der Vorteil davon ist, dass es schneller ist und Sie ActiveForm nutzen können. Die Nachteile sind, dass Sie wissen müssen, welche Felder Sie für jede Option anzeigen möchten, und es nicht erlaubt, n Anzahl der Felder zu akkumulieren, wenn Sie nicht wissen, wie viel n ist.

2) Mit Ajax

Im Fall, dass Sie mögen, Ajax verwenden ruft die zusätzlichen Formularfelder laden finden Sie eine controller/action Kombination machen müssen, dass die Felder je nach Art zurück, die Sie weitergeben in der GET

Diese Aktion generiert die HTML der Felder, die Sie anzeigen möchten. Hier ein Beispiel:

public function actionAjaxFields($type) 
{ 
    $html = ''; 
    if($type == "class") 
    { 
     $html .= Html::textInput('Field1'); 
    } 
    elseif($type == "prompt") 
    { 
     $html .= Html::textInput('Field2'); 
    } 
    else 
    { 
     // etc... 
    } 
    return $html; 
} 

Beachten Sie, dass Sie auch eine Benutzer-ID an diese Methode übergeben können, die es Ihnen erlaubt, ein Modell zu generieren und Html::activeTextInput() verwenden, aber Sie werden nicht in der Lage sein, die Vorteile von ActiveForm Funktionen zu nutzen.

Sobald dies erledigt ist, können Sie eine Funktion zum Änderungsereignis der Drop-Down-binden sollen und etwas entlang der Linien von verwenden: Ich weiß nicht viel über AngularJS

var responsePromise = $http.get("controller/ajax-fields", {params: {type: <type-from-dropdown>}}); 

Leider so ist dies das Ausmaß der ist die Hilfe, die ich auf der Javascript-Seite der Dinge geben kann. Ich bin sicher, es gibt mehr als genug Informationen über Google/Stackoverflow über Bindungsereignisse und das Hinzufügen von Daten an das DOM in angularjs, um Sie zum Laufen zu bringen.

Lassen Sie mich wissen, wenn ich auf der Yii2-Seite eine zusätzliche Hilfe sein kann.