Here is my embedded code:
HTML:
<div id="user-panel">
<div class="text-center">
{{ fillItem }}
</div>
<form method="POST" action="http://site5/user_account/experiences/17" accept-charset="UTF-8" v-on:submit.prevent="updateItem(17)">
<input name="_method" type="hidden" value="PATCH">
<!-- Employer Field -->
<div class="form-group col-sm-6">
<label for="employer">Employer:</label>
<input class="form-control" v-model="fillItem.employer" name="employer" type="text" value="Some Emplyer" id="employer">
</div>
<!-- Designation Field -->
<div class="form-group col-sm-6">
<label for="designation">Designation:</label>
<input class="form-control" v-model="fillItem.designation" name="designation" type="text" value="some designation" id="designation">
</div>
<!-- Submit Field -->
<div class="form-group col-sm-12">
<input class="btn btn-primary" type="submit" value="Save">
</div>
</form>
</div>
Javascript:
<div id="user-panel">
<div class="text-center">
{{ fillItem }}
</div>
<form method="POST" action="http://site5/user_account/experiences/17" accept-charset="UTF-8" v-on:submit.prevent="updateItem(17)">
<input name="_method" type="hidden" value="PATCH">
<!-- Employer Field -->
<div class="form-group col-sm-6">
<label for="employer">Employer:</label>
<input class="form-control" v-model="fillItem.employer" name="employer" type="text" value="Some Emplyer" id="employer">
</div>
<!-- Designation Field -->
<div class="form-group col-sm-6">
<label for="designation">Designation:</label>
<input class="form-control" v-model="fillItem.designation" name="designation" type="text" value="some designation" id="designation">
</div>
<!-- Submit Field -->
<div class="form-group col-sm-12">
<input class="btn btn-primary" type="submit" value="Save">
</div>
</form>
</div>
Here is a jsfiddle for that.
What I want to achieve is to load the default form field values into a vue object.
The form fields do have some default values, but vue makes them blank. How can I load the default form values in vue? I can't embed the values through direct vue object, as values are going to be dynamic, and Javascript code will be placed in a special.js file.
There is a explanation for v-model in the Doc:
<input v-model='something'>
is just syntactic sugar for
<input :value='something' #input="value => { something = value }">
So after you assign value to input, Vue would reset the value of input by something from data of Vue instance like above. That means you couldn't pass default form field value into Vue object by value attribute of input tag.
For initialization, you can try to directly set Vue object when you init Vue instance, or modify Vue object in Callback function of dynamic access to default values.
Hope for you a little help.
Related
When I use inputmask for my form input elements TAB Key not working. I can't switch with other input via tab key. I want use TAB key for switch via inputmask
HTML FORM
<form class="validate-form mt-2 pt-50" action="KisiEkle" enctype="multipart/form-data" method="POST">
<div class="modal-body">
<label>TC: </label>
<div class="mb-1">
<input type="text" id="TC" name="TC" placeholder="TC bilgisi" class="form-control" autocomplete="off" required="required" />
</div>
<label>Ad Soyad: </label>
<div class="mb-1">
<input type="text" id="AdSoyad" name="AdSoyad" placeholder="Ad Soyad" class="form-control" autocomplete="off" required="required" />
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Ekle</button>
</div>
</form>
JAVASCRİPT CODE
$(document).ready(function () {
$("#TC").inputmask("*{11,11}", { clearIncomplete: true, greedy: false });
});
<script src="~/assets/js/jquery.inputmask.min.js"></script> //2022 Robin Herbots
Here i am creating a listing form where the user can list there data after logging into the website.I want to add username also when the user submit the form.In the listing form i have used a input type=hidden in which i have put the username.
I want to add this username value to my lisitng model and pass the value of model to the database
I want to bind the value of hidden field of my template driven form to the model of my angular application
I am getting this username from the api
Below is my angular6 template driven form
<form #listingForm="ngForm" (ngSubmit)="OnSubmit(listingForm)" style="margin-top:100px">
<div class="container">
<div class="row">
<div class=" col-md-offset-1 col-md-10 col-md-offset-1" style="padding-top:35px;margin:0 auto;box-shadow: 1px 2px 6px 0px rgba(102,102,102,0.73);">
<h3 style="color:black">Add Your Listing Here</h3>
<hr>
<div *ngIf="userClaims">
<input type="hidden" #Username="ngModel" [(ngModel)]="userClaims.Username" [value]="list.Username" name="Username">
</div>
<div class="row" style="padding-top:50px;">
<div class="col-sm-6">
<label for="">Business Name</label>
<input type="text" #BName="ngModel" [(ngModel)]="list.BName" name="BName">
</div>
<div class="col-sm-6">
<label for="">Business Tagline</label>
<input type="text" #BTagline="ngModel" [(ngModel)]="list.BTagline" name="BTagline">
</div>
</div>
<div class="clearfix">
<button type="submit" class="signupbtn" >Sign Up</button>
</div>
</div>
</div>
</div>
</form>
Below is my listing.model.ts
export class Listing {
}
I am getting the Username from the other services of my application
why don't you assign userClaims.Username to list.Username in ts file itself and make it simple
<input type="hidden" #Username="ngModel" [(ngModel)]="list.Username" name="Username">
You can remove the above hidden input also since it will not impact on anything.
By Using the below method i am able to bind the value
<input type="hidden" #Username="ngModel" [(ngModel)]="userClaims.Username"
name="Username">
I have letter.ts file as
export class Letter {
clkletter:number;
inOut:string;
inOutNo:string;
inOutDate:string;
letterIssuedSubBy:string;
letterFile:string;
representativeName:string;
}
But in html i have used its only two properties: letter.inOutNo and letter.inOutDate in the form.Other properties are needed to be hardcoded as they are null or default value.
<div class="col-md-6">
<div class="col-md-12">
<label for="letterDate">Letter Date</label>
<input type="date" class="form-control" id="letterDate" required [(ngModel)]="letter.inOutNo" name="letterDate">
</div>
<div class="col-md-12">
<div class="form-group">
<label for="chalaniNo">Chalani Number</label>
<input type="text" class="form-control" id="chalaniNo" required [(ngModel)]="letter.inOutDate" name="chalaniNo">
</div>
</div>
</div>
So i tried in html to pass the like in normal html we used to do but it is not working. I tried like this to send the data to component so it gets bind:
<input [(ngModel)]="letter.inOut" value="AnnexOne" type="hidden" />
I need to send the values from html to component so it gets binded.How can i achieve this?
I created a form and when I submitted it, it was not saving data in chrome autofill database. I inspected html page of amazon.com and I have come up with a bare minimum form that helps saving data in auto fill database. Following is the code.
<BODY>
<form action="" method="post">
<div class="panel panel-default">
<div class="panel-body">
<div class="col-lg-6">
<div >
<label for="address-ui-widgets-enterAddressLine1" >First Nadme</label>
<input name="address-ui-widgets-enterAddressLine1" id="address-ui-widgets-enterAddressLine1" maxlength="30" type="text">
</div>
<div >
<label >Lastaaa </label>
<input id="address-ui-widgets-enterAddressCity" maxlength="30" type="text">
</div>
<div >
<label >username</label>
<input id="address-ui-widgets-enterAddressStateOrRegion" maxlength="150" type="text" >
</div>
<div >
<label >dfkdfk</label>
<input id="address-ui-widgets-enterAddressPostalCode" maxlength="254" type="text">
</div>
</div>
</div> <!-- panel-body -->
<div class="panel-footer">
<input class="btn btn-success btn-sm" type="submit" value="Register">
</div> <!-- panel-footer -->
</div> <!-- panel -->
</form>
</BODY>
I have just added random labels. The only thing that i am not getting is that if I change name of any id then auto fill does not save any data. I am unable to get the logic.
I want to disable all the form components so that it can't be edited when view button is clicked.
this is my form
<form action="#" class="form-horizontal" >
<div class="form-group">
<label for="fieldname" class="col-md-3 control-label">Name</label>
<div class="col-md-6">
<input type="text" ng-model="newItem.customSelected" typeahead="name as name.name for name in members | filter:{name:$viewValue}" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="fieldhname" class="col-md-3 control-label">House name</label>
<div class="col-md-6">
<input type="text" ng-model="newItem.customSelected1" typeahead="house_name as house_name.house_name for house_name in family | filter:{house_name:$viewValue}" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="" class="col-md-3 control-label"><?php echo $this->lang->line('label_family_id'); ?></label>
<div class="col-md-6">
<input type="text" ng-model="newItem.customSelected2" typeahead="fm as fm.family_reg_no for fm in family | filter:{family_reg_no:$viewValue}" class="form-control" />
</div>
</div>
<div class="col-md-3"></div>
</form>
and this is my button
<input type="button" class="finish btn-success btn" ng-click="view(newItem)" value="view"/>
Rather than handling it at per-field level, you can put all form elements into fieldset and use ng-disabled to disable the whole fieldset.
you can use fieldset tag by surrounding your buttons with a fieldset and using ng-disabled attribute:
<form action="#" class="form-horizontal" >
<fieldset ng-disabled="isClicked">
<!--your form here --!>
</fieldset>
</form>
now all that left is in the view(newItem) function do:
$scope.view = function(newItem){
$scope.isClicked = true;
// Your code here and set it to false when your are done with it
}
You could use an overlay and have a ng-show on it or you could add to each input ng-disabled
Set a scope variable when the view button is clicked.
Use ng-disabled in combination with the scope variable to disable the fields.