Salesforce Aura开发 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就能看到我们新创建的电影记录位列其中，如有遗漏欢迎指正，有问题可在评论区留言