Concatenate form values in controller - angularjs

I have a typical contact form where I concat the values into a preview div with AngularJS. This works fine if all the fields are filled out. I would like to move this into a controller so that I can conditionally add some static text such as only put a slash between phone and fax if both those fields are filled. I cannot find any sample code that goes beyond concatenating a couple values.
<div class="col-md-offset-1">
<div class="form-group">
<label class="control-label col-sm-2" for="companyFirm">Company/Firm</label>
<div class="col-sm-10">
<input type="text" ng-model="companyFirm" class="form-control" placeholder="Enter your company or firm name" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="contact">Contact</label>
<div class="col-sm-10">
<input type="text" ng-model="contact" class="form-control" placeholder="Enter the full name of the listing contact">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="address">Address</label>
<div class="col-sm-10">
<input type="text" ng-model="address" class="form-control" placeholder="Enter your street address">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="city">City</label>
<div class="col-sm-10">
<input type="text" ng-model="city" class="form-control" placeholder="Enter your city">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="state">State</label>
<div class="col-sm-4">
<input type="text" ng-model="state" class="form-control" placeholder="Enter your state">
</div>
<!-- </div>
<div class="form-group"> -->
<label class="control-label col-sm-2" for="phone">Phone</label>
<div class="col-sm-4">
<input type="phone" ng-model="phone" ng-change="getPhoneFax()" class="form-control" placeholder="Enter your phone number">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="zipcode">Zip Code</label>
<div class="col-sm-4">
<input type="text" ng-model="zipcode" class="form-control" placeholder="Enter your Zip Code">
</div>
<!-- </div>
<div class="form-group"> -->
<label class="control-label col-sm-2" for="fax">Fax</label>
<div class="col-sm-4">
<input type="phone" ng-model="fax" class="form-control" placeholder="Enter your fax number">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email</label>
<div class="col-sm-10">
<input type="text" ng-model="email" class="form-control" placeholder="Enter your email address">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="website">Website</label>
<div class="col-sm-10">
<input type="text" ng-model="website" class="form-control" placeholder="Enter your website address">
</div>
</div>
</div>
<h4>60-word Description</h4>
<div class="col-md-offset-1">
<div class="form-group">
<label class="control-label col-sm-2" for="description"></label>
<div class="col-sm-10">
<div>You have used <span class="wordCount">{{description|wordCounter}}</span> of your allowed 60 words.</div>
<textarea ng-model="description" class="form-control" rows="4" required></textarea>
<span class="help-block">Your 60 word, plain text only description begins after the listing header. You will receive a proof for approval prior to publication.</span>
</div>
</div>
<div class="col-md-offset-3 col-sm-6" style="background:#ddd; padding:15px; margin-top:50px;">
<strong>Live preview of listing</strong>
<div style="background:#fff; border:5px solid #eee; padding:15px; line-height:1em;">
<strong><span class="text-uppercase" style="font-size:1.3em;" ng-show="companyFirm">{{companyFirm}}<br /></span>
<span ng-show="contact">{{contact}}<br /></span></strong>
<span style="font-weight:500;">
<span ng-show="address">{{address}}<br /></span>
<span ng-show="city">{{city}}, </span><span ng-show="state" class="text-uppercase">{{state}}</span> <span ng-show="zipcode">{{zipcode}}</span><br />
<span ng-show="phone">{{phone}} / </span><span ng-show="fax">Fax: {{fax}}<br /></span>
<span ng-show="email">{{email}}<br /></span>
<span ng-show="website">{{website}}<br /></span>
</span>
<span style="color:#787878;">{{description}}</span>
</div>
</div>
<div class="clearfix"></div>
</div>
http://plnkr.co/edit/1oqneNRXuTXhiqE7vKWw?p=catalogue

If I understand question correctly, in controller You can use standard js concatenate:
$scope.phoneFax = function() {
//You can also save result in variable;
return ($scope.phone ? $scope.phone : '')
+ ($scope.phone && $scope.fax ? ' / ' : '')
+ ($scope.fax ? 'Fax: ' + $scope.fax : '');
};
Template:
<span>{{phoneFax()}}</span>
Also you can make it directly in the template:
<span ng-show="phone">{{phone}}</span>
<span ng-show="fax && phone"> / </span>
<span ng-show="fax">Fax: {{fax}}<br /></span>

Related

tabindex is not working with required attribute

<div class="row">
<div class="col-md-6">
<div class="form-body">
<div class="form-group">
<label>First Name</label>
<div class="input-group">
<input type="text" tabIndex="1" name="first_name" class="form-control">
</div>
</div>
<div class="form-group">
<label>Email Address</label>
<div class="input-group">
<input type="email" tabIndex="3" name="username" class="form-control" ng-model="username" required user-exist /><br/> <span style="color: red" ng-show="partnerForm.username.$touched && partnerForm.username.$invalid">
<span ng-show="partnerForm.username.$error.required">Email is required.</span>
<span ng-show="partnerForm.username.$error.email">Enter Correct Format.</span>
<span ng-show="partnerForm.username.$error.userExist">User already exists.</span>
</span>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-body">
<div class="form-group">
<label>Last Name</label>
<div class="input-group">
<input type="text" tabIndex="2" name="last_name" class="form-control">
</div>
</div>
</div>
</div>
</div>
the tabindex 3 is not working.i have checked by removing the required attr then it is working .the attributes required and tabindex is conflicting with each other.please help me to solve this.or provide a directive (working) for tabindex.

ng-form in ng-repeat and checking the validation status of all forms

So, I have a parent form with a nested set of ng-forms like this:
<form class="row" name="parentForm" ng-repeat="model in controller.addresses track by $index" novalidate>
<div class="col-xs-12 row-title">
<h1>{{ model.type || 'Delivery' }} address</h1>
</div>
<div class="col-xs-12 col-sm-4 col-lg-4">
<div class="form" name="saveForm" ng-form>
<div class="form-group">
<label class="control-label">Company name</label>
<input class="form-control" name="company" type="text" placeholder="Enter your company name" ng-model="model.company" />
</div>
<div class="form-group" ng-class="{ 'has-error' : saveForm.address1.$invalid && !saveForm.address1.$pristine }">
<label class="control-label">House name/number</label>
<input class="form-control" name="houseName" type="text" placeholder="Please enter your address 1" ng-model="model.houseName" ng-minlength="3" required />
</div>
<div class="form-group">
<label class="control-label">Street</label>
<input class="form-control" name="street" type="text" placeholder="Please enter your address 2" ng-model="model.street" />
</div>
<div class="form-group">
<label class="control-label">Town</label>
<input class="form-control" name="town" type="text" placeholder="Please enter your address 3" ng-model="model.town" />
</div>
<div class="form-group">
<label class="control-label">County</label>
<input class="form-control" name="county" type="text" placeholder="Please enter your address 4" ng-model="model.county" />
</div>
<div class="form-group" ng-class="{ 'has-error' : saveForm.postCode.$invalid && !saveForm.postCode.$pristine }">
<label class="control-label">Post code</label>
<input class="form-control" name="postCode" type="text" placeholder="Enter your post code" ng-model="model.postCode" ng-minlength="3" required />
</div>
</div>
</div>
</form>
I then have a button:
<div class="row">
<div class="col-xs-12 col-sm-4 col-lg-4">
<div div class="row">
<div class="col-xs-6 tile">
<a class="red" ui-sref="^">
<i class="fa fa-trash"></i>
<div class="footer">Back</div>
</a>
</div>
<div class="col-xs-6 tile" ng-if="parentForm.$valid">
<a class="yellow" ui-sref="^.finance">
<i class="fa fa-arrow-right"></i>
<div class="footer">Continue</div>
</a>
</div>
</div>
</div>
</div>
I want this button to only show if all child forms are valid. I was hoping that I could just use parentForm.$valid but that doesn't work.
Does anyone know how to solve this?
Try to do parentForm.saveForm.$valid.
It will work
Nested forms aren't valid in HTML5 - but you can place your saveForm outside the parentForm and then use the input element's form attribute to specify a form for your input elements.
<form name="form1">
<input type="string" ng-model="form1input" required>
<input type="string" form="form2" ng-model="form2input" required>
</form>
<div ng-form="form2" id="form2"></div>
<button ng-if="form1.$valid && form2.$valid">Click</button>
Plunker: https://plnkr.co/edit/y9ipsNoEW596guLf2CzM?p=preview

Angularjs validation not working correctly on form

I have below form:
<form name="commentForm" class="form-horizontal" role="form" novalidate>
<div class="form-group">
<label class="control-label col-sm-2" >Enter Name:</label>
<div class="col-sm-10" show-errors>
<input type="text" class="form-control" id="name" name="name" ng-model="subject.name" placeholder="Enter Name" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="comment">Enter comment:</label>
<div class="col-sm-10" show-errors>
<textarea class="form-control" rows="5" id="comment" name="comment" ng-model="subject.text" style="resize: none;" required></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button ng-click="submitForm()" type="submit" class="btn btn-default" ng-disabled="commentForm.$invalid">Submit</button>
</div>
</div>
</form>
I have created showErrors directive to show error for required-fields.
But this form validation is not working properly. Although if I am using the same code in some other partials, it is working fine. What could be the possible mistake that I am making here?

Responsive Design Breaking point Messed up

I have a form that is collecting a user's personal information. I've started to add control to the form using bootstrap grid. I am having issue when I reach certain breaking point. For example, 768 and 781px, one of the control will be out of place. Then, it will fall back into place at 782px and work fine. I have 3 separate css files, but they don't have anything at the moment. How do I handle it when the control as is the case between 768 and 781px?
html file
<div class="row">
<div class="form-group">
<label for="FirstName" class="col-xs-12 col-sm-2 col-md-2 label-control">First Name:</label>
<div class="col-xs-12 col-sm-4 col-md-4">
<input type="text" id="FirstName" name="FirstName" class="form-control"/>
</div>
<label for="middleName" class="col-xs-12 col-sm-2 col-md-2 label-control">Middle Name:</label>
<div class="col-xs-12 col-sm-4 col-md-4">
<input type="text" class="form-control" name="middleName" id="middleName" />
</div>
<label for="lastName" class="col-xs-12 col-sm-2 col-md-2 label-control">Last Name:</label>
<div class="col-xs-12 col-sm-4 col-md-4">
<input type="text" class="form-control" name="lastName" id="lastName" />
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"></div>
<div class="form-group">
<label for="FirstName" class="col-xs-12 col-sm-2 col-md-2 label-control">Sex:</label>
<div class="col-xs-12 col-sm-4 col-md-4">
<select id="Sex" name="Sex" class="form-control">
<option>Select Sex</option>
</select>
</div>
<label for="middleName" class="col-xs-12 col-sm-2 col-md-2 label-control">DOB:</label>
<div class="col-xs-12 col-sm-4 col-md-4">
<input type="text" class="form-control" name="DOB" id="DOB" />
</div>
<label for="lastName" class="col-xs-12 col-sm-2 col-md-2 label-control">Race:</label>
<div class="col-xs-12 col-sm-4 col-md-2">
<select id="Race" name="Race" class="form-control">
<option>Select Race</option>
</select>
</div>
</div>
</div>
#media only screen and (min-device-width:768px) and (max-device-width:1024px){
}
#media only screen and (min-device-width:1024px) {
}
When the screen is less than 768px
The screen is between 768 and 781 px; the lastName field is out of place
Screen is 782px or more
Right So your question was wired, Ive tided up your code abit (not fully otherwise you wont learn) The form is now responsive from big screens down to phones.
You will see that I have only used col-md-xx to achieve the look you want. If you want something changes just pop a comment and ill be glad to do it for you
<div class="container">
<div class="row">
<div class="form-group">
<label for="FirstName" class="col-md-2 label-control">First Name:</label>
<div class="col-md-4">
<input type="text" id="FirstName" name="FirstName" class="form-control"/>
</div>
<label for="middleName" class="col-md-2 label-control">Middle Name:</label>
<div class="col-md-4">
<input type="text" class="form-control" name="middleName" id="middleName" />
</div>
<label for="lastName" class="col-md-2 label-control">Last Name:</label>
<div class="col-md-4">
<input type="text" class="form-control" name="lastName" id="lastName" />
</div>
</div>
<div class="col-md-12"></div>
<div class="form-group">
<label for="middleName" class="col-md-2 label-control">DOB:</label>
<div class="col-md-4">
<input type="text" class="form-control" name="DOB" id="DOB" />
</div>
<label for="FirstName" class="col-md-2 label-control">Sex:</label>
<div class="col-md-4">
<select id="Sex" name="Sex" class="form-control">
<option>Select Sex</option>
</select>
</div>
<label for="lastName" class="col-xs-12 col-md-2 label-control">Race:</label>
<div class="col-xs-12 col-md-2">
<select id="Race" name="Race" class="form-control">
<option>Select Race</option>
</select>
</div>
</div>
</div>
</div>

How to show validation error messages on the right side of the input field in a tooltip using angular js?

I have form which contains some fields and have validated these fields by using angular.validator. The error messages are displayed under every fields. But I want to display this error messages using tooltip. For example , if some particular field is not valid , the error message should be shown on the right of the field box. I didn't found a solution from other posts of stackoverflow. How to do this ?
I want to show this field is required in a tooltip. ( by making directive) .
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Contact No</label>
<div class="col-sm-8">
<input type="text" ng-model="proFormSubmit.contactNo" validator="[required, number]" class="form-control" id="" placeholder="" validation-message="Only numeric values are valid!">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Profile Picture</label>
<div class="col-sm-8 companyLogo"> <img src="assets/img/user.png" alt="..." class="img-rounded col-sm-3 ">
<input type="file" id="exampleInputFile" ng-model="proFormSubmit.profilePic">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Language</label>
<div class="col-sm-8">
<select class="form-control" ng-model="proFormSubmit.language" validator="[required]">
<option></option>
<option value="english">English</option>
<option value="spanish">Spanish</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Address 1</label>
<div class="col-sm-8">
<input type="text" ng-model="proFormSubmit.address1" validator="[required]" class="form-control" id="" placeholder="">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Address 2</label>
<div class="col-sm-8">
<input type="text" ng-model="proFormSubmit.address2" validator="[required]" class="form-control" id="" placeholder="">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">City</label>
<div class="col-sm-8">
<input type="text" ng-model="proFormSubmit.city" validator="[required]" class="form-control" id="" placeholder="">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">State</label>
<div class="col-sm-8">
<select class="form-control" ng-model="proFormSubmit.state" validator="[required]">
<option></option>
<option value="Indonesia">Tamilnadu</option>
<option value="Indonesia">Kerala</option>
<option value="Indonesia">Rajasthan</option>
</select>
</div>
</div>
I use http://angular-ui.github.io/bootstrap which has a $tooltipProvider that allows you to modify behavior of the tooltip. Other than that this seems like a CSS + ng-show candidate

Resources