Salesforce Lightning开发学习（三）Component表单初解

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

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

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

关于对象电影的相关内容及相关组件请参考之前的博客内容：http://www.cnblogs.com/luqinghua/p/8979893.html

1.创建组件：MyTest_CreateMovie

 1 <aura:component Controller="MyTestMovieController">
 2     <aura:attribute name="movieList" type="Movie__c[]"/>
 3     <aura:attribute name="movie" type="Movie__c" 
 4                     default="{'sobjectType':'Movie__c',
 5                              'Name':'',
 6                              'Director__c':'',
 7                              'ToStar__c':'',
 8                              'ShowTime__c':'',
 9                              'Number__c':0,
10                              'Flag__c':false}"/>    
11     <!-- 表头 -->
12      <lightning:layout class="slds-page-header slds-page-header--object-home">
13         <lightning:layoutItem >
14             <lightning:icon iconName="standard:scan_card" alternativeText="新电影"/>
15         </lightning:layoutItem>
16         <lightning:layoutItem padding="horizontal-small">
17             <div class="page-section page-header">
18                 <h1 class="slds-text-heading--label">电影</h1>
19                 <h1 class="slds-text-heading--medium">新电影</h1>
20             </div>
21         </lightning:layoutItem>
22     </lightning:layout>
23     <!-- 电影字段列表    -->
24     <lightning:layout >
25         <lightning:layoutItem padding="around-small" size="6">
26             <div aria-labelledby="newMovieForm">
27                 <fieldset class="slds-box slds-theme--default slds-container--small">
28                     <legend id="newMovieForm" class="slds-text-heading--small slds-p-vertical--medium">
29                         新建电影
30                     </legend>
31                     <form class="slds-form--stacked">
32                         <lightning:input aura:id="MovieForm" label="名称"
33                                          name="movieName"
34                                          value="{!v.movie.Name}"
35                                          required="true"/>                        
36                         <lightning:input aura:id="MovieForm" label="导演"
37                                          name="movieDirector"
38                                          value="{!v.movie.Director__c}"
39                                          placeholder="请输入导演名称"/>
40                          <lightning:input aura:id="MovieForm" label="主演"
41                                          name="movieToStar"
42                                          value="{!v.movie.ToStar__c}"
43                                          placeholder="请输入主演名称"/>       
44                         <lightning:input type="number" aura:id="MovieForm" label="票价"
45                                          name="movieNumber"
46                                          formatter="currency"
47                                          min="1"
48                                          step="0.5"
49                                          value="{!v.movie.Number__c}"
50                                          messageWhenRangeUnderflow="票价最低1元"/>                        
51                         <lightning:input type="date" aura:id="MovieForm" label="上映时间"
52                                          name="movieShowTime"
53                                          value="{!v.movie.ShowTime__c}"/>                        
54                         <lightning:input type="checkbox" aura:id="MovieForm" label="是否上映"
55                                          name="movieFlag"
56                                          checked="{!v.movie.Flag__c}"/>
57                         <lightning:button label="加入电影列表"
58                                           class="slds-m-top--medium"
59                                           variant="brand"
60                                           onclick="{!c.AddToList}"/>
61                     </form>
62                 </fieldset>
63             </div>           
64         </lightning:layoutItem>
65     </lightning:layout>
66 </aura:component>

将该组件放在 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     @AuraEnabled
10     public static List<Movie__c> GetAll(){
11         List<Movie__c> movieList = new List<Movie__c>();
12         movieList = [select ShowTime__c,ToStar__c,Theme__c,Director__c,Name from Movie__c limit 50];
13         return movieList;
14     }
15     //创建记录
16     @AuraEnabled
17     public static Movie__c saveMovie(Movie__c movie) {
18         // Perform isUpdatable() checking first, then
19         upsert movie;
20         return movie;
21     }
22 }

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