GithubHelp home page GithubHelp logo

kartik-v / yii2-widget-activeform Goto Github PK

View Code? Open in Web Editor NEW
63.0 6.0 35.0 338 KB

Enhanced Yii2 active-form and active-field with full bootstrap styling support (sub repo split from yii2-widgets).

Home Page: http://demos.krajee.com/widget-details/active-form

License: Other

PHP 82.77% CSS 6.54% JavaScript 10.69%
yii2-widgets activeform activefield php

yii2-widget-activeform's Introduction

Krajee Logo
yii2-widget-activeform
Donate       kartikv

Stable Version Unstable Version License Total Downloads Monthly Downloads Daily Downloads

Extends and enhances the Yii ActiveForm widget. Facilitates all three form layouts available in Bootstrap i.e. vertical, horizontal, and inline. Allows options for offsetting labels and inputs for horizontal form layout. Works closely with the extended ActiveField component. In addition, this extension enhances and extends the Yii ActiveField component. Allows Bootstrap styled input group addons to be prepended or appended to textInputs. Implements feedback icons within inputs based on contextual states. Automatically adjusts checkboxes and radio input offsets for horizontal forms. Allows, flexibility to control the labels and placeholders based on form layout style (e.g. hide labels and show them as placeholder for inline forms). The extended ActiveField functionalities available are:

  • Addons
    • Prepend Addon
    • Append Addon
    • Icon Addon
    • Input Addon
    • Button Addon
    • Button Dropdown Addon
    • Segmented Button Addon
    • Prepend & Append
    • Input Group Settings
    • Multiple Addons Configuration (new since v1.4.9)
  • Input Feedback Icons
  • Input Hints Management
  • Inputs
    • Checkbox
    • Radio
    • Checkbox List
    • Radio List
    • Static Input
    • HTML 5 Input
    • Checkbox Button Group
    • Radio Button Group
  • Multi Select
    • Vertical Form
    • Horizontal Form
    • Radio List
    • Display Options

NOTE: This extension is a sub repo split of yii2-widgets. The split has been done since 08-Nov-2014 to allow developers to install this specific widget in isolation if needed. One can also use the extension the previous way with the whole suite of yii2-widgets.

Installation

The preferred way to install this extension is through composer. Check the composer.json for this extension's requirements and dependencies. Read this web tip /wiki on setting the minimum-stability settings for your application's composer.json.

To install, either run

$ php composer.phar require kartik-v/yii2-widget-activeform "@dev"

or add

"kartik-v/yii2-widget-activeform": "@dev"

to the require section of your composer.json file.

Release Changes

NOTE: Refer the CHANGE LOG for details on changes to various releases.

Demo

You can refer detailed documentation and demos for understanding the usage of the extension at these links below:

Usage

ActiveForm

// add this in your view
use kartik\form\ActiveForm;

// Vertical Form
$form = ActiveForm::begin([
    'id' => 'form-signup',
    'type' => ActiveForm::TYPE_VERTICAL
]);

// Inline Form
$form = ActiveForm::begin([
    'id' => 'form-login', 
    'type' => ActiveForm::TYPE_INLINE,
    'fieldConfig' => ['autoPlaceholder'=>true]
]);

// Horizontal Form Configuration
$form = ActiveForm::begin([
    'id' => 'form-signup', 
    'type' => ActiveForm::TYPE_HORIZONTAL,
    'formConfig' => ['labelSpan' => 3, 'deviceSize' => ActiveForm::SIZE_SMALL]
]);

ActiveField

// Implement a feedback icon
echo $form->field($model, 'email_2', [
    'feedbackIcon' => [
        'default' => 'envelope',
        'success' => 'ok',
        'error' => 'exclamation-sign',
        'defaultOptions' => ['class'=>'text-primary']
    ]
])->textInput(['placeholder'=>'Enter a valid email address...']);

// Prepend an addon text
echo $form->field($model, 'email', ['addon' => ['prepend' => ['content'=>'@']]]);

// Append an addon text
echo $form->field($model, 'amount_paid', [
    'addon' => ['append' => ['content'=>'.00']]
]);

// Formatted addons (like icons)
echo $form->field($model, 'phone', [
    'addon' => [
        'prepend' => [
            'content' => '<i class="fas fa-phone"></i>'
        ]
    ]
]);

// Formatted addons (inputs)
echo $form->field($model, 'phone', [
    'addon' => [
        'prepend' => [
            'content' => '<input type="radio">'
        ]
    ]
]);

// Formatted addons (buttons)
echo $form->field($model, 'phone', [
    'addon' => [
        'prepend' => [
            'content' => Html::button('Go', ['class'=>'btn btn-primary']),
            'asButton' => true
        ]
    ]
]);

License

yii2-widget-activeform is released under the BSD-3-Clause License. See the bundled LICENSE.md for details.

yii2-widget-activeform's People

Contributors

arturszulc avatar derekisbusy avatar dmytroraschepkin avatar evgen-d avatar fredyns avatar freezy-sk avatar itzen avatar kartik-v avatar mikspark avatar nbogol avatar sammousa avatar thiagotalma avatar yasserhassan avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

yii2-widget-activeform's Issues

checkbox issue

I"m trying to display a check on a checkbox according to a value from I:m reading from a DB.
Unfortunately the chackbox is not being displayed as checked.
What I"m doing wrong (the if statement is working correctly)?

if ($dishType == 10) // check the check box
{
echo $form->field($model, 'menuActive')->checkbox(['name'=>'checkID_' . $dishType,
'checked' => true, 'label' =>'Active?']);
}
else // leave the checkbox unchecked
echo $form->field($model, 'menuActive')->checkbox(['name'=>'checkID_' . $dishType,
'checked'=>0, 'label' =>'Active?']);

SCREEN_READER labels occupy space in horizontal forms

In horizontal forms with fields having 'showLabels' => ActiveForm::SCREEN_READER, the generated fields are expected to occupy the full width of their containers the same as with showLabels = false. Instead, the label location remains vacant as shown below. When the browser width is decreased so the form is displayed as vertical, this space moves above the field creating extra space between it and the field above.
4

Automatically generate input "required" and "maxlength" from model rules

It would be great if the form builder can automatically generate the "required" and "maxlength" attributes for the form inputs according to their settings in the model rules, something like "autoRequired" and "autoMaxLength" both defaults to false. This would greatly enhance application maintainability by making the changes in the model automatically reflect in the corresponding forms all over the application.

Problem when trying to Update to Ver. 1.4.4

I was using outdated version, so I tried to update to ver. 1.4.4 via composer. However, composer kept installing Ver. 1.4.2 over and over.

So I ended up downloading a ZIP file to install it myself. I'm not sure whether there was a problem with my composer or something else.

I'm a newbie by the way, and I'll be glad if you let me know what the problem actually is. :)

Cheers,
Isaak

Error after update 299b0f2 (Calling unknown method: ....getAttributeHint())

The error seems to be resulting from line 682 in file ActiveField.php.

While at it, I'm thinking aloud about the new render() function in the same file. The if statement
if ($this->getConfigParam('showHints') === false)
come before if ($this->form->staticOnly === true)
Wouldn't it be more optimized to check for staticOnly and returning if true first before processing regular form fields?

Issue: Cannot control size of fields

I've been unable to found any option that provide size control of field. I checked in your classes, it seems to me used with full span property of active form.

$errorDivClass = "col-{$size}-{$this->form->fullSpan}";
$inputDivClass = $errorDivClass;

is there anyway that I add class to active field and it behaves accordingly?

Like this:

field($model, 'att', ['inputDivClass' => 'col-lg-5'])->dropDownList($jsonArr); ?>

This is my form tag:

'question-create', 'type' => ActiveForm::TYPE_HORIZONTAL, 'formConfig' => ['labelSpan' => 3, 'deviceSize' => ActiveForm::SIZE_SMALL] ]); ?>

New property staticValue in ActiveField

The new property staticValue will be the static value for the field and will be displayed if set and if you are using the static input OR for all inputs when you have setup the form to be staticOnly.

Allow showLabels to be tristate

Allow showLabels property in ActiveForm & ActiveField to be tristate:

  • true: show labels
  • false: hide labels
  • ActiveForm::SCREEN_READER: show in screen reader only (hide from normal display)

autoPlaceholder and tabular input

In case tabular input is used (following this tutorial: http://www.yiiframework.com/doc-2.0/guide-input-tabular-input.html):

foreach ($settings as $index => $setting) {
    echo $form->field($setting, "[$index]value")->label($setting->name);
}

then autoPlaceholder sets placeholder="[1]value"

It would be nice if you could override placeholder value when using autoPlaceholder with something. Either using that label() from tutorial

$form->field($setting, "[$index]value")->label('anything');
or
$form->field($setting, "[$index]value")->textInput(['placeholder' => 'anything']);

Maybe it already can be done and I'm missing something?

Checkbox labels

This code returns the name of the field, not 'label'

echo $form->field($model, 'field')->checkbox(['label' => 'label']);

Enhancement: Convert private properties to protected for all extensions

I suggest converting private properties to protected to enable accessing them when extending the extensions. Currently, when extending ActiveField for example, there's no way to access $_offset, $_multiselect, and $_isStatic from the derived class. There are special situations where a modification is specific for a very special case that can not be generalized as a core feature and this is where protected properties can be useful.

If my suggestion is accepted, I can help with this enhancement.

Enhance ActiveField inputs to include bootstrap default styles

Hi,

Im trying to use your ActiveForm widget which seems to bring a bunch of interesting added features.
However, when I use it, my input fields doesn't get the class form-control, so they are not bootstrap-stylized.

It seems to be because your widget herits from yii\widget\ActiveForm and not yii\bootstrap\ActiveForm..
Is it an intended behavior?
The form-group div is there in both cases, its just the form-control class missing...

Thanks

Enhacement: Secondary value option for static-only form fields.

I am suggesting an option to get the attribute value from a relation or function when the form is rendered in static mode, primarily to render the static version of drop down lists and multi-select combo boxes. It can be a field option called 'staticValue' as follows:

  • A function/expression which could be used to display the values of multiple selections (e.g. convert them to a comma-separated list) or to format the value.
  • Get the value from a relation. This can be used for single-selection like this:
'staticValue' => 'country->name'
// or 'staticValue' => '$model->country->name'
// Do not automatically use attribute ID because the relation name might be different.
// This gets the value form $model->country->name.

Along these lines, an option like 'staticFormat' too would be useful in certain cases.

ActiveField

WTF? $options = []?

return parent::dropDownList($items, $options = []);

Required option for inputs

I suggest adding an option to generate the "required" attribute for to the form input and defaults to false.

ActiveField disables hints prematurely.

During initialization ActiveField checks if $this->parts['{hint}'] is set and if not it sets showHints to false.
When used with a form widget the hint is set after initialization, but it is not displayed since showHints was set to false.

Allow staticOnly forms

New property in ActiveForm staticOnly that allows you to set the entire form as static data (using bootstrap static inputs).

Setting unknown property: kartik\form\ActiveField::skipFormLayout

Hi kartik, I am getting subjected error when trying to use sub attributes with FormGrid,
I tried to check it by myself, and I found out that all files are updated (v1.4.1) but ActiveField.php still has v 1.3.0, I tried to execute composer update several times and composer require kartik-v/yii2-widget-activeform "*" but ActiveField.php is not getting updated. Can you please guide me what m I doing wrong here.

I also tried to clear cache of composer by composer clearcache but still ActiveField.php is not getting update.

Thanks in advance

Hint container

Hey,

Is there any specific reason for omitting {hint} tag in buildTemplate() method?

buildLayoutParts() and then setLayoutContainer('hint', $errorDivClass);
prepares container for hint as follows (or similar)

<div class=\'col-md-offset-2 col-md-6\'>{hint}</div>

but it is not applied and I'm getting something like
hint_1

After small update in ActiveField::buildTemplate()

protected function buildTemplate()
    {
        ...
        $this->template = strtr($this->template, [
            '{label}' => $showLabels ? "{$this->contentBeforeLabel}{label}{$this->contentAfterLabel}" : '',
            '{input}' => str_replace(
                '{input}',
                $this->contentBeforeInput . $this->generateAddon() . $this->renderFeedbackIcon() . $this->contentAfterInput,
                $input
            ),
            '{error}' => $showErrors ? str_replace(
                '{error}',
                "{$this->contentBeforeError}{error}{$this->contentAfterError}",
                $error
            ) : '',
            // UPDATE
            '{hint}' => str_replace('{hint}', "{hint}", $hint)
        ]);
    }

I'm getting hint with applied container
hint_2

I use ActiveForm::TYPE_HORIZONTAL form

The help (error) block is not required for the static field type

I believe the error block should be removed from the static field type since there's no interaction with the user and no entered data. Probably the hint block too.

EDIT: I found a scenario where the help blocks are required here. When a form displays a static field with invalid value (e.g. entered manually to the database but invalid in the model) and the form is submitted, the help block displays the validation error under the static field. If find this odd as I would expect that static fields are decoupled from the model and rendered as pure text so are no longer submitted back with the form inputs.

Enhance support for labels and horizontal form layouts

  • Allow labels to be set to false to hide them completely
  • Enhance HORIZONTAL forms to style labels appropriately when they are blank/empty.
  • Enhance HORIZONTAL forms to style labels, hints, and errors appropriately when they are set to false to fill the container width

maxlength for activeField

Hi Kartik,

How to add the maxlength attribute to an input field. ex: the following one doesnt work

echo $form->field($model, 'email', [
'addon' => ['prepend' => ['content' => '@']],
'options' => ['maxlength'=>127, 'placeholder' => 'Enter a valid email...'],
]);

New repository for documentation and examples

This request is for all extensions. It would be good to have a separate repository for the documentation including the working examples shown in the website. This way it can be available for offline use as a backup measure, and contributions can be made to the documentation too besides the code.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.