初步了解了Lightning的组件开发流程后，我们来认识下lightning的表单

点击对象管理器，选择对象：电影(Movie__c)，创建字段

标签	API	数据类型
票价	Number__c	数字(16,2)
是否上映	Flag__c	复选框

 

 

 

关于对象电影的相关内容及相关组件请参考之前的博客内容：

1.创建组件：MyTest_CreateMovie

1 
     
       2     
       3     
          11     
      12      
      
       13         
       
        14             
        15         
       16         
       
        17             
        
         18                 
         
电影
19                 
         
新电影
20             
        
21         
       22     
      23     
      24     
      
       25         
       
        26             
        
         27                 
         
          28                     
          
29 新建电影30 
31                     
          
           32 
            36 
           40 
            44 
            51 
            54 
           57 
           61 
          62                 
         
63             
        
           64         
       65     
      66 
     

将该组件放在 My_Test.app中并预览

可以看到如上图所示的一个表单，包含了常用的复选框，日期，数字，文本等类型，然后是完成后面的创建方法

2.补充MyTest_CreateMovieController.js

1 ({ 2     AddToList : function(component, event, helper) { 3         //系统提供的校验错误信息的标准方法可校验必填项以及最小值等等 4         var validExpense = component.find('MovieForm').reduce(function (validSoFar, inputCmp) { 5             // 显示填写错误的字段消息 6             inputCmp.showHelpMessageIfInvalid(); 7             return validSoFar && inputCmp.get('v.validity').valid; 8         }, true); 9          // 通过字段校验后继续创建的逻辑10         if(validExpense){11             // 创建一条记录12             var movie = component.get("v.movie");13             console.log("传入的电影信息: " + JSON.stringify(movie));14             helper.createMovie(component, movie);15             //将表单重置16              component.set("v.movie",{'sobjectType':'Movie__c',17                              'Name':'',18                              'Director__c':'',19                              'ToStar__c':'',20                              'ShowTime__c':'',21                              'Number__c':0,22                              'Flag__c':false});23         }24     }25 })

在MyTest_CreateMovieController.js中完成对表单数据的基本校验，比如表单的必填项，以及设置的票价不小于1元等等

3.补充MyTest_CreateMovieHelper.js

({    createMovie : function(component, movie) {        //调用Apex类中的方法        var action = component.get("c.saveMovie");        //传递参数        action.setParams({            "movie": movie        });        //方法调用        action.setCallback(this, function(response){            //方法调用状态            var state = response.getState();            if (state === "SUCCESS") {                var movieList = component.get("v.movieList");                movieList.push(response.getReturnValue());                component.set("v.movieList", movie);            }        });        var movie = component.get("v.movie");                $A.enqueueAction(action);    }})

MyTest_CreateMovieHelper.js中主要是与后台APEX控制类中的方法进行交互，将数据存入数据库中保存起来

4.更新MyTestMovieController类，在其中加入saveMovie方法

1 /********* 2      *  Author:ricardo 3      *  Time:2018-03-21 4      *  Function:MyTest_Movie 后台控制类 5      *  Test: 6      */ 7 public class MyTestMovieController{ 8     //初始化 9     @AuraEnabled10     public static List
     
       GetAll(){11         List
      
        movieList = new List
       
        ();12         movieList = [select ShowTime__c,ToStar__c,Theme__c,Director__c,Name from Movie__c limit 50];13         return movieList;14     }15     //创建记录16     @AuraEnabled17     public static Movie__c saveMovie(Movie__c movie) {18         // Perform isUpdatable() checking first, then19         upsert movie;20         return movie;21     }22 }
       
      
     

综上所示，一个简单的创建电影条目的表单就完成了，打开组件MyTest_Movie就能看到我们新创建的电影记录位列其中，如有遗漏欢迎指正，有问题可在评论区留言