Yii2: how to load different model base on user's preference - yii2

Question

I have two model loaded when i user loads the page but only one of this model will take information base on user's preference, but my problem is when the user submit the form the two model are submitted and i get an error because the other model needs to take information before it can proceed too, i want to know how i can load just one of the model and ignore the other when base on which of the form the user filled
Contoller
public function actionSignup($mode)
{
//if($mode === 'personalAccount'){
$model = new SignupForm();
if ($model->load(Yii::$app->request->post())) {
if ($user = $model->signup()) {
if (Yii::$app->getUser()->login($user)) {
return $this->goHome();
}
}
}
// }else{
$model_business = new SignupFormbusiness();
if ($model_business->load(Yii::$app->request->post())) {
if ($user = $model_business->signup()) {
if (Yii::$app->getUser()->login($user)) {
return $this->goHome();
}
}
}
return $this->render('signup', [
'model' => $model,
'model_business' => $model_business,
]);
// }
}
view
<?php
use yii\helpers\Html;
use yii\bootstrap\ActiveForm;
//if(isset($model_business))
$this->title = 'Signup';
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="container" style="width: 100%;">
<div class="row" style="background: #fcfcfc;">
<div class="col-md-12 login-form-top">
</div>
<div class="col-lg-12 signup-form ">
<div class="signup-form-container">
<?php $form = ActiveForm::begin(['id' => 'login-form' ]);
$loginUrl = \Yii::$app->UrlManager->createUrl(['site/login']);
?>
<h1>Sign Up</h1>
<p style="text-align: center;">Please fill in this form to create an account.<br/>
Already a Member? Login
</p>
<div class="form-radio col-xs-6" style="padding:0;">
<label class="radio-container">Personal Account
<input type="radio" checked="checked" value="personal" name="acc-type" id="personal_radio">
<span class="radio-checkmark"></span>
</label>
</div>
<div class="form-radio col-xs-6" style="padding:0;">
<label class="radio-container">Business Account
<input type="radio" value="enterprise" name="acc-type" id="enterprise_radio">
<span class="radio-checkmark"></span>
</label>
</div>
<hr>
<?php if(isset($model) && !empty($model)): ?>
<div id="personal">
<div class="col-xs-6" style="padding-left:0; padding-right:5px;">
<?= $form->field($model, 'last_name', [
'template'=>'{input}<span class="asteric form-control-feedback">*</span>'
. ' {error}{hint}'
])->textInput(['placeholder'=> 'Surname'])->label(false) ?>
</div>
<div class="col-xs-6" style="padding-right:0; padding-left:5px;">
<?= $form->field($model, 'first_name', [
'template'=>'{input}<span class="asteric form-control-feedback">*</span>'
. ' {error}{hint}'
])->textInput(['placeholder'=> 'Given Name'])->label(false) ?>
</div>
<div class="col-xs-12 col-nopadding">
<?= $form->field($model, 'username',[
'template'=>'{input}<span class="asteric form-control-feedback">*</span>'
. ' {error}{hint}'
])->textInput(['placeholder'=> 'Username'])->label(false) ?>
</div>
<div class="col-md-12 col-nopadding">
<?= $form->field($model, 'email',[])->textInput(['placeholder'=> 'Email'])->label(false) ?>
</div>
<div class="col-md-12 col-nopadding">
<?= $form->field($model, 'phone1',[
'template'=>'{input}<span class="asteric form-control-feedback">*</span>'
. ' {error}{hint}'
])->textInput(['placeholder'=> 'Phone Number'])->label(false) ?>
</div>
<div class="col-md-12 col-nopadding">
<?= $form->field($model, 'password',[
'template'=>'{input}<span class="asteric form-control-feedback">*</span>'
. ' {error}{hint}'
])->passwordInput(['placeholder'=> 'Password'])->label(false) ?>
</div>
</div>
<?php endif;?>
<?php if(isset($model_business) && !empty($model_business)): ?>
<div id="enterprise">
<div class="col-xs-12" style="padding-right:0; padding-left:5px;">
<?= $form->field($model_business, 'business_name', [
'template'=>'{input}<span class="asteric form-control-feedback">*</span>'
. ' {error}{hint}'
])->textInput(['placeholder'=> 'Business Legal name'])->label(false) ?>
</div>
<div class="col-xs-12 col-nopadding">
<?= $form->field($model_business, 'username',[
'template'=>'{input}<span class="asteric form-control-feedback">*</span>'
. ' {error}{hint}'
])->textInput(['placeholder'=> 'Username'])->label(false) ?>
</div>
<div class="col-md-12 col-nopadding">
<?= $form->field($model_business, 'email',[])->textInput(['placeholder'=> 'Business email'])->label(false) ?>
</div>
<div class="col-md-12 col-nopadding">
<?= $form->field($model_business, 'phone1',[
'template'=>'{input}<span class="asteric form-control-feedback">*</span>'
. ' {error}{hint}'
])->textInput(['placeholder'=> 'Business Phone Number'])->label(false) ?>
</div>
<div class="col-md-12 col-nopadding">
<?= $form->field($model_business, 'password',[
'template'=>'{input}<span class="asteric form-control-feedback">*</span>'
. ' {error}{hint}'
])->passwordInput(['placeholder'=> 'Password'])->label(false) ?>
</div>
</div>
<?php endif;?>
<!--<input class="signup-input" type="password" placeholder="Repeat Password" name="psw-repeat" >-->
<div class="col-md-12 col-nopadding">
<p class="signup-condition">By creating an account you agree to our Privacy Policy.</p>
</div>
<div class="form-group">
<?= Html::submitButton('Sign Up', ['class' => 'btn', 'name' => 'signup-button']) ?>
</div>
<?php ActiveForm::end(); ?>
</div>
</div>
</div>
</div>
<?php
$script = <<< JS
$(document).ready(function(){
$(function (){
$("#enterprise_radio").on('click',function(){
$(this).prop('checked', true);
if($(this).is(':checked')){
$("#enterprise").show();
$("#personal").hide();
}
});
});
$(function (){
$("#personal_radio").on('click',function(){
$(this).prop('checked', true);
if($(this).is(':checked')){
$("#enterprise").hide();
$("#personal").show();
}
});
});
});
JS;
$this->registerJs($script);
?>
The two images above is a brief description of what i'm trying to achieve but the forms are loaded from different model and must be filled before it can be validate and i only need user to fill one of this form at a time which means the other will be empty and cannot validate which will trigger an error, is there any way to solve this problem or a better way to fix this.
i fill in the first form the presonal account and click submit, nothing happens, then i check on the business account form and got this error which means it also want me to fill out the form before it can proceed with the submition

Answer 1

You should either create a custom FormModel or create 2 separate forms,that would show up whenever the relevant choice/radio input is selected, what yo are doing is that the models are differen and the form is combined for the fields of both models which is odd and creating problems.
If you choose to create a single FormModel you should use Conditional Validation which provides when and whenClient inside the rules for the validation checks.
A quick suggestion would be to create 2 different forms like below as both are different models and you should assign the fields for the models to 2 different forms, rather than trying to merge all the fields in a single form and keeping the models separate
<?php
use yii\helpers\Html;
use yii\bootstrap\ActiveForm;
//if(isset($model_business))
$this->title = 'Signup';
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="container" style="width: 100%;">
<div class="row" style="background: #fcfcfc;">
<div class="col-md-12 login-form-top">
</div>
<div class="col-lg-12 signup-form ">
<div class="signup-form-container">
<?php
$loginUrl = \Yii::$app->UrlManager->createUrl(['site/login']);
?>
<h1>Sign Up</h1>
<p style="text-align: center;">Please fill in this form to create an account.<br/>
Already a Member? Login
</p>
<div class="form-radio col-xs-6" style="padding:0;">
<label class="radio-container">Personal Account
<input type="radio" checked="checked" value="personal" name="acc-type" id="personal_radio">
<span class="radio-checkmark"></span>
</label>
</div>
<div class="form-radio col-xs-6" style="padding:0;">
<label class="radio-container">Business Account
<input type="radio" value="enterprise" name="acc-type" id="enterprise_radio">
<span class="radio-checkmark"></span>
</label>
</div>
<hr>
<?php if (isset($model) && !empty($model)): ?>
<?php $form = ActiveForm::begin(['id' => 'signup-form']); ?>
<div id="personal">
<div class="col-xs-6" style="padding-left:0; padding-right:5px;">
<?=
$form->field($model, 'last_name', [
'template' => '{input}<span class="asteric form-control-feedback">*</span>'
. ' {error}{hint}'
])->textInput(['placeholder' => 'Surname'])->label(false)
?>
</div>
<div class="col-xs-6" style="padding-right:0; padding-left:5px;">
<?=
$form->field($model, 'first_name', [
'template' => '{input}<span class="asteric form-control-feedback">*</span>'
. ' {error}{hint}'
])->textInput(['placeholder' => 'Given Name'])->label(false)
?>
</div>
<div class="col-xs-12 col-nopadding">
<?=
$form->field($model, 'username', [
'template' => '{input}<span class="asteric form-control-feedback">*</span>'
. ' {error}{hint}'
])->textInput(['placeholder' => 'Username'])->label(false)
?>
</div>
<div class="col-md-12 col-nopadding">
<?= $form->field($model, 'email', [])->textInput(['placeholder' => 'Email'])->label(false) ?>
</div>
<div class="col-md-12 col-nopadding">
<?=
$form->field($model, 'phone1', [
'template' => '{input}<span class="asteric form-control-feedback">*</span>'
. ' {error}{hint}'
])->textInput(['placeholder' => 'Phone Number'])->label(false)
?>
</div>
<div class="col-md-12 col-nopadding">
<?=
$form->field($model, 'password', [
'template' => '{input}<span class="asteric form-control-feedback">*</span>{error}{hint}'
])->passwordInput(['placeholder' => 'Password'])->label(false)
?>
</div>
<div class="col-md-12 col-nopadding">
<p class="signup-condition">By creating an account you agree to our Privacy Policy.</p>
</div>
<div class="form-group">
<?= Html::submitButton('Sign Up', ['class' => 'btn', 'name' => 'signup-button']) ?>
</div>
</div>
<?php ActiveForm::end() ?>
<?php endif; ?>
<?php if (isset($model_business) && !empty($model_business)): ?>
<?php $form = ActiveForm::begin(['id' => 'signup-business']); ?>
<div id="enterprise">
<div class="col-xs-12" style="padding-right:0; padding-left:5px;">
<?=
$form->field($model_business, 'business_name', [
'template' => '{input}<span class="asteric form-control-feedback">*</span>'
. ' {error}{hint}'
])->textInput(['placeholder' => 'Business Legal name'])->label(false)
?>
</div>
<div class="col-xs-12 col-nopadding">
<?=
$form->field($model_business, 'username', [
'template' => '{input}<span class="asteric form-control-feedback">*</span>'
. ' {error}{hint}'
])->textInput(['placeholder' => 'Username'])->label(false)
?>
</div>
<div class="col-md-12 col-nopadding">
<?= $form->field($model_business, 'email', [])->textInput(['placeholder' => 'Business email'])->label(false) ?>
</div>
<div class="col-md-12 col-nopadding">
<?=
$form->field($model_business, 'phone1', [
'template' => '{input}<span class="asteric form-control-feedback">*</span>'
. ' {error}{hint}'
])->textInput(['placeholder' => 'Business Phone Number'])->label(false)
?>
</div>
<div class="col-md-12 col-nopadding">
<?=
$form->field($model_business, 'password', [
'template' => '{input}<span class="asteric form-control-feedback">*</span>'
. ' {error}{hint}'
])->passwordInput(['placeholder' => 'Password'])->label(false)
?>
</div>
</div>
<div class="col-md-12 col-nopadding">
<p class="signup-condition">By creating an account you agree to our Privacy Policy.</p>
</div>
<div class="form-group">
<?= Html::submitButton('Sign Up', ['class' => 'btn', 'name' => 'signup-button']) ?>
</div>
<?php ActiveForm::end(); ?>
<?php endif; ?>
</div>
</div>
</div>
</div>
<?php
$script = <<< JS
$(document).ready(function(){
$(function (){
$("#enterprise_radio").on('click',function(){
$(this).prop('checked', true);
if($(this).is(':checked')){
$("#enterprise").show();
$("#personal").hide();
}
});
});
$(function (){
$("#personal_radio").on('click',function(){
$(this).prop('checked', true);
if($(this).is(':checked')){
$("#enterprise").hide();
$("#personal").show();
}
});
});
});
JS;
$this->registerJs($script);
?>
Controller Code
function actionSignup($mode)
{
$model = new SignupForm();
$model_business = new SignupFormbusiness();
if (Yii::$aap->request->isPost) {
$accountType = Yii::$app->request->post("acc-type");
if ($accountType == 'personal' && $model->load(Yii::$app->request->post())) {
if ($user = $model->signup()) {
if (Yii::$app->getUser()->login($user)) {
return $this->goHome();
}
}
}
if ($accountType == 'enterprise' && $model_business->load(Yii::$app->request->post())) {
if ($user = $model_business->signup()) {
if (Yii::$app->getUser()->login($user)) {
return $this->goHome();
}
}
}
}
return $this->render('signup', [
'model' => $model,
'model_business' => $model_business,
]);
}

Answer 2

Hoping that by default validation is activated for the two forms, the following solution will apply
First, give the two forms different ids say first_form_id and secod_form_id as follows:
//For the first form:
<?php $form = ActiveForm::begin(['id' => 'first_form_id']); ?>
//For the second form:
<?php $form = ActiveForm::begin(['id' => 'second_form_id']); ?>
Then you can modify the last part of your view file as below:
<?php
$script = <<< JS
$(document).ready(function(){
$(function (){
$("#enterprise_radio").on('click',function(){
$(this).prop('checked', true);
if($(this).is(':checked')){
$("#enterprise").show();
$("#personal").hide();
// Here we are disabling the validation for the first form;
$('#first_form_id').yiiActiveForm('validate', false);
//Activate the validation of the second form just incase it was disabled
$('#second_form_id').yiiActiveForm('validate', true);
}
});
});
$(function (){
$("#personal_radio").on('click',function(){
$(this).prop('checked', true);
if($(this).is(':checked')){
$("#enterprise").hide();
$("#personal").show();
//Activate the validation of the first form
$('#first_form_id').yiiActiveForm('validate', true);
//De-activate the validation of the first form just incase it was disabled
$('#second_form_id').yiiActiveForm('validate', false);
}
});
});
});
JS;
$this->registerJs($script);
?>