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

 <aura:component Controller="MyTestMovieController">
     <aura:attribute name="movieList" type="Movie__c[]"/>
     <aura:attribute name="movie" type="Movie__c"
                     default="{'sobjectType':'Movie__c',
                              'Name':'',
                              'Director__c':'',
                              'ToStar__c':'',
                              'ShowTime__c':'',
                              'Number__c':0,
                              'Flag__c':false}"/>
     <!-- 表头 -->
      <lightning:layout class="slds-page-header slds-page-header--object-home">
         <lightning:layoutItem >
             <lightning:icon iconName="standard:scan_card" alternativeText="新电影"/>
         </lightning:layoutItem>
         <lightning:layoutItem padding="horizontal-small">
             <div class="page-section page-header">
                 <h1 class="slds-text-heading--label">电影</h1>
                 <h1 class="slds-text-heading--medium">新电影</h1>
             </div>
         </lightning:layoutItem>
     </lightning:layout>
     <!-- 电影字段列表    -->
     <lightning:layout >
         <lightning:layoutItem padding="around-small" size="6">
             <div aria-labelledby="newMovieForm">
                 <fieldset class="slds-box slds-theme--default slds-container--small">
                     <legend id="newMovieForm" class="slds-text-heading--small slds-p-vertical--medium">
                         新建电影
                     </legend>
                     <form class="slds-form--stacked">
                         <lightning:input aura:id="MovieForm" label="名称"
                                          name="movieName"
                                          value="{!v.movie.Name}"
                                          required="true"/>
                         <lightning:input aura:id="MovieForm" label="导演"
                                          name="movieDirector"
                                          value="{!v.movie.Director__c}"
                                          placeholder="请输入导演名称"/>
                          <lightning:input aura:id="MovieForm" label="主演"
                                          name="movieToStar"
                                          value="{!v.movie.ToStar__c}"
                                          placeholder="请输入主演名称"/>
                         <lightning:input type="number" aura:id="MovieForm" label="票价"
                                          name="movieNumber"
                                          formatter="currency"
                                          min="1"
                                          step="0.5"
                                          value="{!v.movie.Number__c}"
                                          messageWhenRangeUnderflow="票价最低1元"/>
                         <lightning:input type="date" aura:id="MovieForm" label="上映时间"
                                          name="movieShowTime"
                                          value="{!v.movie.ShowTime__c}"/>
                         <lightning:input type="checkbox" aura:id="MovieForm" label="是否上映"
                                          name="movieFlag"
                                          checked="{!v.movie.Flag__c}"/>
                         <lightning:button label="加入电影列表"
                                           class="slds-m-top--medium"
                                           variant="brand"
                                           onclick="{!c.AddToList}"/>
                     </form>
                 </fieldset>
             </div>
         </lightning:layoutItem>
     </lightning:layout>
 </aura:component>

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

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

2.补充MyTest_CreateMovieController.js

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

在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方法

 /*********
      *  Author:ricardo
      *  Time:2018-03-21
      *  Function:MyTest_Movie 后台控制类
      *  Test:
      */
 public class MyTestMovieController{
     //初始化
     @AuraEnabled
     public static List<Movie__c> GetAll(){
         List<Movie__c> movieList = new List<Movie__c>();
         movieList = [select ShowTime__c,ToStar__c,Theme__c,Director__c,Name from Movie__c limit 50];
         return movieList;
     }
     //创建记录
     @AuraEnabled
     public static Movie__c saveMovie(Movie__c movie) {
         // Perform isUpdatable() checking first, then
         upsert movie;
         return movie;
     }
 }

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