Показать предварительный просмотр / Изменить параметр перед отправкой формы с помощью AngularJS - PullRequest
0 голосов
/ 06 сентября 2018

У меня есть HTML-форма, как показано ниже:

    <div class="container">
    <div class="form-group" ng-controller="studentController">
    <form role="form" class="well form-horizontal" id="registerForm" name="forms.registerForm">
      <div class="form-group">
        <label class="col-md-4 control-label">First Name </label>
        <input ng-model="formdata.firstname" required type="text" name="firstname">
      </div>
      <div class="form-group">
        <label class="col-md-4 control-label">Middle Name </label>
        <input ng-model="formdata.middlename" required type="text" name="middlename" maxlength="1">
      </div>
      <div class="form-group">
        <label class="col-md-4 control-label">Last Name </label>
        <input ng-model="formdata.lastname" required type="text" name="lastname">
      </div>
      <div class="form-group">
        <label for="email" class="col-md-4 control-label">E-mail address</label>
        <input ng-model="formdata.email" required type="email">
      </div>
      <div class="form-group">
        <label class="col-md-4 control-label">Student ID</label>
        <input ng-model="formdata.studentid" required type="number">
      </div>
      <div required class="form-group">
          <label class="col-md-6 control-label">
              level
          </label> <br>
        <div class="radio">
          <label class="col-md-6 control-label">
            <input type="radio" ng-model="formdata.type" value="300" checked>
            300 </label>
        </div>
        <div class="radio">
          <label class="col-md-6 control-label">
            <input type="radio" ng-model="formdata.type" value="400">
            400 </label>
        </div>
        <div class="radio">
          <label class="col-md-6 control-label">
            <input type="radio" ng-model="formdata.type" value="500">
            500 </label>
        </div>
      </div>
          <div class="form-group" align="center">
      <input type="file" ngf-select ng-model="formdataa.file" name="file" ngf-pattern="'application/pdf'" accept="'.pdf'" ngf-max-size="5MB" required ngf-model-invalid="errorFile">

</div>
<div class="container" align="center">
        <button class="btn btn-register" ng-click="tempData()" ng-disabled="forms.registerForm.$invalid" >Submit</button>
    </div>

Ниже приведен угловой код javascript для хранения сведений о форме и файле на сервере.

$scope.tempData = function(ev){
        console.log($scope.formdata);
var confirm = $mdDialog.confirm()
      .title('Are you sure you want to delete this user?')
      .ok('YES')
      .cancel('CANCEL');
        $mdDialog.show({
                locals:{formdata: $scope.formdata, dataToPassFile: $scope.formdataa}, //here where we pass our data
                controller: _DialogController,
                controllerAs: 'vd',
                templateUrl: 'scripts/app/studentdialog/studentdialog.html',
                parent: angular.element(document.body),
                targetEvent: ev,
                clickOutsideToClose: true

            })
            .then(
                function(answer) {},
                function() {

                }
            );
    };

function _DialogController($scope, $mdDialog, formdata,dataToPassFile) {
     $scope.closeDialog = function() {
          $mdDialog.hide();
     };
    $scope.firstname = formdata.firstname;
    $scope.lastname = formdata.lastname;
    $scope.middlename = formdata.middlename;
    $scope.studentid = formdata.studentid;
    $scope.email = formdata.email;
    $scope.type = formdata.type;
    $scope.file = dataToPassFile.file;
    console.log('FIle Passed' +dataToPassFile.file);
$scope.tfile = function () {
        console.log("TFIle Called");
        if ($scope.forms.registerForm.file.$valid && $scope.formdataa.file) {
            $scope.upload($scope.formdataa.file);
        }
    };
    $scope.upload = function (file) {
            file.upload = Upload.upload({
                url: $rootScope.baseURL + 'php/uploadT.php',
                method: 'POST',
                data: {
                    'file': file,
                    'userId': $scope.formdata.firstname, 
                    'type': $scope.formdata.type
                },
            });
$scope.register = function () {
        console.log("clicked");
        $scope.loading = true;
        AppServices.register($scope.formdata)
            .then(function (result) {
                if (Object.keys(result).length > 0) {
                    // update current users list
                    if (result.type == '300' || result.type == '400') {
                        $scope.users.300.push(result);
                    } else {
                        console.log(result);
                        $scope.users[result.type] = result;
                    }

                    $scope.forms.registerForm.$setPristine();
                    $scope.forms.registerForm.$setUntouched();
                    $scope.msg = {};
                    $scope.msg.successRegister = 'Registered Successfully';
                } else {
                    $scope.msg = {};
                    $scope.msg.errorRegister = 'Email already exists!';
                }
            })
            .finally(function (data) {
                $scope.loading = false;
            });
    };

Когда пользователь нажимает кнопку «Отправить», я хочу создать страницу подтверждения, на которой он снова предоставит пользователю все данные, чтобы пользователь мог подтвердить, а затем фактически отправить форму. Пожалуйста, дайте мне знать, как я могу использовать localStorage для одновременного хранения и извлечения данных для подтверждения страницы. Заранее спасибо!

  • ОБНОВЛЕНИЕ: я создал MDDialog и, вызывая его при нажатии кнопки, теперь я могу видеть все данные в MDDialog. Когда пользователь нажимает кнопку «ОК», я хочу, чтобы данные на странице (а не данные на MDDialog) передавались в бэкэнд (php), как я могу это сделать?

1 Ответ

0 голосов
/ 17 сентября 2018

Почему бы не показать эту информацию на модале и вызвать функцию подтверждения в том же контроллере, где вы находитесь, после закрытия модального окна. Таким образом, вам не понадобится политика кэширования.

...