ratio-expression-editor.component.html

<input type="text" ng-model="$ctrl.localValue.label" class="form-control" ui-validate="'$ctrl.isValidRatio()'">

<div class="oppia-form-error oppia-ratio-error">
  <[$ctrl.warningText]>
</div>

<style>
  .oppia-ratio-error {
    position: absolute;
  }
</style>

ratio-expression-editor.component.ts

// Copyright 2020 The Oppia Authors. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS-IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

/**
 * @fileoverview Component for ratio editor.
 */

import { ObjectsDomainConstants } from
  'domain/objects/objects-domain.constants';

angular.module('oppia').component('ratioExpressionEditor', {
  bindings: {
    value: '='
  },
  template: require('./ratio-expression-editor.component.html'),
  controller: ['$scope',
    function($scope) {
      const ctrl = this;
      ctrl.warningText = '';
      var ratioString = '1:1';

      ctrl.isValidRatio = function() {
        if (ctrl.value.length === 0) {
          ctrl.warningText = 'Please enter a non-empty ratio value.';
          return false;
        }
        var RATIO_REGEX = /^\s*\d+\s*(:\s*\d+)+\s*$/;
        var answerIsValid = false;
        if (!RATIO_REGEX.test(ctrl.value)) {
          ctrl.warningText =
            ObjectsDomainConstants.RATIO_PARSING_ERRORS.INVALID_FORMAT;
          answerIsValid = false;
        } else {
          ctrl.value = ctrl.value.toString().replace(/\s/g, '');
          ctrl.warningText = '';
          answerIsValid = true;
        }
        return answerIsValid;
      };

      ctrl.$onInit = function() {
        if (ctrl.value === null) {
          ctrl.value = '';
        }
        ctrl.currentValue = ctrl.value;
      };
    }
  ]
});