How to compare inputText with init value in Lightning Component?

Question

I would like to know how to compare inputText with init-inputText value in Lightning Component.
We can create record by Lightning component.
But, We don't want to create record when init inputText value doesn't change.

What should I do?

StoreChange.cmp

<aura:component  controller="StoreChangeController" implements="flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="recordId" type="Id" />
    <aura:attribute name="account" type="Account"/>
    <aura:attribute name="contract" type="Contract__c"/>
    <aura:attribute name="compareContract" type="Contract__c"/>
    <aura:handler name="init" action="{!c.init}" value="{!this}" />

    <div class="slds-form-element slds-m-bottom--small slds-is-required">
        <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon--right">
            <lightning:input aura:id="contractName" label="店舗名" name="contractname" value="{!v.contract.NewAccName__c}" onchange="{!c.newChangeCon}"/>
            <lightning:input aura:id="contractPhone" label="電話番号" name="contractphone" value="{!v.contract.NewAccPhone__c}" type="phone" onchange="{!c.changeText}"/>
        </div>
    </div>
    <!-- As Hide Field ?-->
            <lightning:input aura:id="compareNames" label="店舗名" name="comparename" value="{!v.compareContract.NewAccName__c}"/>

    <!-- Save Button -->
            <lightning:button aura:id="disablebuttonid" label="申請する" onclick="{!c.createRecord}" variant="brand" class="slds-m-top_medium" disabled="true"/>
    <!-- succes message -->

</aura:component>

StoreChangeController.js

({
    init: function(component, event, helper) {
        // 取引先の初期値取得
        helper.getAccountInfo(component, event);
    },
    changeText : function(component, event, helper) {
        var button = component.find('disablebuttonid');
        button.set('v.disabled',false);
    },
    newChangeCon : function(component, event, helper) {
        //入力内容取得
        var origin = component.find('contractName');
        var originVal = origin.get('v.value');//Changed value

        var changed = component.find('compareNames');
        var changeVal = changed.get('v.value');//Original value

        if(originVal != changeVal){
            alert('changed->true');
        }else{
            alert('false');
        }

        var button = component.find('disablebuttonid');
        button.set('v.disabled',false);
    }
})

StoreChangeHelper.js

({
    getAccountInfo : function(component, event) {
        // Account ID
        var accountId = component.get("v.recordId");

        // Apex
        var action = component.get("c.getChangeAccount");
        action.setParams({
            "accountId": accountId
        });
        action.setCallback(this, function(data) {
            var state = data.getState();
            if (state === "SUCCESS") {
                // Lightning側の変数『account』にApexからreturnされた結果をセット
                component.set("v.contract", data.getReturnValue());
                component.set("v.compareContract", data.getReturnValue());
            }
            else {
                console.log("Failed with state: " + state);
            }
        });
        // Send action off to be executed
        $A.enqueueAction(action);
    }
})

StoreChangeController.apxc

public without sharing class StoreChangeController {

    @AuraEnabled
    public static Contract__c getChangeAccount(Id accountId) {
        //レコードＩＤから店舗情報取得
        List<Account> accList = [SELECT Name,Phone FROM Account WHERE Id = :accountId];

        //Contractの対応する項目にset
        Contract__c contract = new Contract__c();
        contract.NewAccName__c = accList[0].Name;
        contract.NewAccPhone__c = accList[0].Phone;
        return contract;
    }

}

Answer 1

On init i can see that you are storing the contract values in 2 attributes

        component.set("v.contract", data.getReturnValue());
        component.set("v.compareContract", data.getReturnValue());

i am assuming the comparecontract will not be used in UI, it just acts as data backup for existing values in the database.

So, on createrecord helper method if you can just compare the field values and only if they are not equal you can call the createrecord server method

var oldContractRecord = component.get("v.compareContract");
var newContractRecord = component.get("v.contract");
if (oldContractRecord.NewAccName__c !== newContractRecord.NewAccName__c)
{
//make server call
} 

There is no need to attach change-handlers for implementing this requirement.