function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
SS KarthickSS Karthick 

AngularJs form in Visualforce page

Hi folks,
           Can anyone tell me how to create the angularjs form in visualforce page?
The form has following fields
number, email, text, textarea and date
I wanna sample code for that..

Thanks in advance
Karthick
Best Answer chosen by SS Karthick
SarfarajSarfaraj
Hi Karthick

Here is one sample for you,
Page: 
<apex:page standardController="Contact" extensions="ContactExt">
    <apex:includeScript value="{!URLFOR($Resource.AngularJSFlowChart, '/lib/angular.js')}"/>
    <div ng-app="app" ng-controller="formController">
  <form name="myForm" novalidate="novalidate">
    <table>
    <tr>
        <td>First Name:</td><td><input type="text" name="FirstName" ng-model="contact.FirstName"/></td>
    </tr>
    <tr>
        <td>Last Name:</td><td><input type="text" required="true" name="LastName" ng-model="contact.LastName"/>
        <span class="error" ng-show="myForm.LastName.$error.required">Required!</span></td>
    </tr>
    <tr>
        <td>Mobile Phone:</td><td><input type="text" name="MobilePhone" ng-pattern="/^[0-9 ()-]{0,}[0-9]{1,}$/" ng-model="contact.MobilePhone"/>
        <span class="error" ng-show="myForm.MobilePhone.$error.pattern">Invalid phone!</span></td>
    </tr>
    <tr>
        <td>Email:</td><td><input type="email" name="Email" ng-model="contact.Email"/>
        <span ng-show="myForm.Email.$error.email">This email format is invalid!</span></td>
    </tr>
    <tr>
        <td>Mobile Description:</td><td><textarea type="text" name="Description" ng-model="contact.Description" rows="4" cols="50"/></td>
    </tr>
    </table>
    <input type="button" ng-click="save()" ng-disabled="myForm.$pristine || myForm.$dirty && myForm.$invalid" value="Save"/>
  </form>
</div>

<script>
var app = angular.module('app', []);
app.controller('formController', function ($scope) {
  $scope.contact = {!contactJson};/*{
      FirstName: '{!Contact.FirstName}', 
      LastName: '{!Contact.LastName}', 
      MobilePhone: '{!Contact.MobilePhone}', 
      Email: '{!Contact.Email}', 
      Description: '{!Contact.Description}'
     };*/
  $scope.save = function()
  {
      saveMethod(JSON.stringify($scope.contact));
  }
});

</script>
<apex:form >
<apex:actionFunction name="saveMethod" action="{!save}" oncomplete="location.reload();">
    <apex:param assignTo="{!contactJson}" name="contactJson" value="x"/>
</apex:actionFunction>
</apex:form>
</apex:page>

Class: 
public with sharing class ContactExt {
    private Contact c;
    public String contactJson {get;set;}
    public ContactExt(ApexPages.StandardController controller) {
        c = (Contact) controller.getRecord();
        contactJson = JSON.serializePretty(c);
    }
    
    public void save()
    {
        c = (Contact)JSON.deserialize(contactJson, Contact.class);
        upsert c;
    }
}

--Akram

All Answers

RamuRamu (Salesforce Developers) 
This might help

http://www.oyecode.com/2013/06/getting-started-with-angularjs-on.html
SarfarajSarfaraj
Hi Karthick

Here is one sample for you,
Page: 
<apex:page standardController="Contact" extensions="ContactExt">
    <apex:includeScript value="{!URLFOR($Resource.AngularJSFlowChart, '/lib/angular.js')}"/>
    <div ng-app="app" ng-controller="formController">
  <form name="myForm" novalidate="novalidate">
    <table>
    <tr>
        <td>First Name:</td><td><input type="text" name="FirstName" ng-model="contact.FirstName"/></td>
    </tr>
    <tr>
        <td>Last Name:</td><td><input type="text" required="true" name="LastName" ng-model="contact.LastName"/>
        <span class="error" ng-show="myForm.LastName.$error.required">Required!</span></td>
    </tr>
    <tr>
        <td>Mobile Phone:</td><td><input type="text" name="MobilePhone" ng-pattern="/^[0-9 ()-]{0,}[0-9]{1,}$/" ng-model="contact.MobilePhone"/>
        <span class="error" ng-show="myForm.MobilePhone.$error.pattern">Invalid phone!</span></td>
    </tr>
    <tr>
        <td>Email:</td><td><input type="email" name="Email" ng-model="contact.Email"/>
        <span ng-show="myForm.Email.$error.email">This email format is invalid!</span></td>
    </tr>
    <tr>
        <td>Mobile Description:</td><td><textarea type="text" name="Description" ng-model="contact.Description" rows="4" cols="50"/></td>
    </tr>
    </table>
    <input type="button" ng-click="save()" ng-disabled="myForm.$pristine || myForm.$dirty && myForm.$invalid" value="Save"/>
  </form>
</div>

<script>
var app = angular.module('app', []);
app.controller('formController', function ($scope) {
  $scope.contact = {!contactJson};/*{
      FirstName: '{!Contact.FirstName}', 
      LastName: '{!Contact.LastName}', 
      MobilePhone: '{!Contact.MobilePhone}', 
      Email: '{!Contact.Email}', 
      Description: '{!Contact.Description}'
     };*/
  $scope.save = function()
  {
      saveMethod(JSON.stringify($scope.contact));
  }
});

</script>
<apex:form >
<apex:actionFunction name="saveMethod" action="{!save}" oncomplete="location.reload();">
    <apex:param assignTo="{!contactJson}" name="contactJson" value="x"/>
</apex:actionFunction>
</apex:form>
</apex:page>

Class: 
public with sharing class ContactExt {
    private Contact c;
    public String contactJson {get;set;}
    public ContactExt(ApexPages.StandardController controller) {
        c = (Contact) controller.getRecord();
        contactJson = JSON.serializePretty(c);
    }
    
    public void save()
    {
        c = (Contact)JSON.deserialize(contactJson, Contact.class);
        upsert c;
    }
}

--Akram
This was selected as the best answer
srinivasdev1.3898810974656055E12srinivasdev1.3898810974656055E12
HI On rerender from a button  angular js not working  but on first page load its working

tried this expression {{1+1}}  on page load got 2
but on rerender  get {{1+1}}  i think angulr js not applied herer
 can u plaese suggest 
VenkatVenkat
@Akram,

Its really good what you shared here! if possible could you please share the file "angular.js" file for using static resource as well.

Thanks
Venkat.
SarfarajSarfaraj
@Venkat, you can download the latest version here https://angularjs.org
Pramodh KumarPramodh Kumar
Part of my page is in angularJs. When i reload the section total everything works fine except the angular section. Do you have any ideas for this kind of issues.

Thanks,
Pramodh.
Sebastian SangervasiSebastian Sangervasi

@pRAMODH - Angular compiles html markup into an application on load (when the document becomes ready). If the content of the page changes after that (e.g. visualforce rerender) you will need to manually tell angular to recompile that block of angular content.

You'll probably want ot read this documentation (https://docs.angularjs.org/guide/bootstrap) to understand how it would work for your uses. Roughly, you'll want to put a script in your visualforce block that rerenders which will call a function to tell angular to recompile:
 

<apex:outputPanel id="refreshesAngularContent">

  <script>
    recompileMyApp();
  </script>

  <!-- The rest of the refreshed content -->

</apex:outputPanel>

<script>
  function recompileMyApp() {
    var jqLiteDocument = angular.element(document);
    angular.bootstrap(jqLiteDocument, ['myApp']);
</script>
Pramodh KumarPramodh Kumar
@Sebastian Sangervasi i found the solution in a differenet way. anyway thanks for the reply