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就能看到我們新創建的電影記錄位列其中，如有遺漏歡迎指正，有問題可在評論區留言