Search code examples
phpangularjslaravelangular-ngmodel

ng-model values not being captured when generated by php function


So I have a function that generates honeypot form fields in Laravel.

The issue is when I submit the form with Angular, the javascript object doesn't contain the my_time or my_name fields.

public function generate(array $honey_name, array $honey_time)
{
    $honey_time_encrypted = parent::getEncryptedTime();
    // Encrypt the current time

    $html = '<div id="' . $honey_name['name'] . '_wrap" style="display:none;">' .
                '<input type="text" ' . $this->attributes($honey_name) . ' id="' . $honey_name['name'] . '" />' .
                '<input type="text" ' . $this->attributes($honey_time) . ' value="' . $honey_time_encrypted . '" />' .
            '</div>';

    echo $html;
}

Any thoughts why?

UPDATE:

Blade Template

<form ng-submit="submitForm(formData)">
    <div class="form-group form-group-lg">
        {!! Form::text('name', null, ['class' => 'form-control', 'placeholder' => 'Name', 'ng-model' => 'formData.name']) !!}
        {!! Honeypot::generate(['name' => 'my_name', 'ng-model' => 'formData.my_name'], ['name' => 'my_time', 'ng-model' => 'formData.my_time']) !!}
    </div>
    <div class="form-group form-group-lg">
        {!! Form::email('email', null, ['class' => 'form-control', 'placeholder' => 'Email', 'ng-model' => 'formData.email']) !!}
    </div>
    <div class="form-group form-group-lg">
        {!! Form::text('subject', null, ['class' => 'form-control', 'placeholder' => 'Subject','ng-model' => 'formData.subject']) !!}
    </div>
    <div class="form-group">
        {!! Form::textarea('message', null, ['class' => 'form-control', 'rows' => '5', 'placeholder' => 'Message', 'ng-model' => 'formData.message']) !!}
    </div>
    <div class="form-group">
        {!! Form::submit('Send', ['class' => 'btn btn-default center-block']) !!}
    </div>
</form>

Submitted form data:

$scope.submitForm = function(formData) {
    console.log(formData);
    Contact.submit(formData).then(function(results) {
        SweetAlert.swal({
            title: "Success!",
            text: "Thanks for getting in touch! I usually respond within 12 hours.",
            type: "success",
        });
    });
};


// Output of console.log();
Object {name: "Daniel", email: "abc@123.com", subject: "asdsadsafas fasfaf", message: "asjfasf aalhfsfa flaskfh aklsflakf a"}

So it's missing the my_time and my_name models, which causes validation to fail.


Solution

  • Okay, I figured it out. Angular doesn't post empty form fields, so that was part of the problem.

    The second issue had to do with formData.my_time. If you plan to set the input value server side, then you must use ng-init="foo = 'bar'" ng-model="foo".

    So once I added ng-init="formData.my_time = \'' . $honey_time_encrypted . '\'" I was good to go.