AngularJS ตรวจสอบว่าแบบฟอร์มถูกต้องในคอนโทรลเลอร์หรือไม่

87

ฉันต้องการตรวจสอบว่าแบบฟอร์มถูกต้องในคอนโทรลเลอร์หรือไม่

ดู:

<form novalidate=""
      name="createBusinessForm"
      ng-submit="setBusinessInformation()"
      class="css-form">
 <!-- fields -->
</form>

ในตัวควบคุมของฉัน:

.controller(
    'BusinessCtrl',
    function ($scope, $http, $location, Business, BusinessService, 
              UserService, Photo)
    {

        if ($scope.createBusinessForm.$valid) {
            $scope.informationStatus = true;
        }

        ...

ฉันได้รับข้อผิดพลาดนี้:

TypeError: Cannot read property '$valid' of undefined

angularjs

— Rober
แหล่งที่มา

คุณห่อไว้รอบ ๆ ฟังก์ชัน setBusinessInformation ภายในคอนโทรลเลอร์หรือไม่?

— matsko

3

โค้ดแยกส่วนเกินไปที่จะวิเคราะห์สิ่งที่อาจผิดพลาด ... สร้างการสาธิตง่ายๆใน jsfiddle.net หรือ plunker ที่จำลองปัญหา แบบฟอร์มอยู่ในขอบเขตBusinessCtrlหรือไม่ ไม่สามารถบอกได้โดยไม่ต้องดูเพิ่มเติม

— charlietfl

@matsko: ไม่ฉันต้องรันโค้ดนี้ในการเริ่มต้นคอนโทรลเลอร์

— Rober

@charlietfl: มีอีกไม่มาก ฉันลบรหัสบางส่วนออกเพื่อให้ตัวอย่างง่ายขึ้น ใช่แบบฟอร์มควรอยู่ในขอบเขตของ BusinessCtrl (ตัวควบคุมถูกตั้งค่าบนเส้นทางใน app.js ฉันเพิ่มโซลูชันของฉันในคำตอบด้านล่าง แต่ฉันไม่รู้ว่าทำไมไม่ทำงานในลักษณะนี้

— Rober

109

ลองทำตามนี้

ในมุมมอง:

<form name="formName" ng-submit="submitForm(formName)">
 <!-- fields -->
</form>

ในตัวควบคุม:

$scope.submitForm = function(form){
  if(form.$valid) {
   // Code here if valid
  }
};

หรือ

ในมุมมอง:

<form name="formName" ng-submit="submitForm(formName.$valid)">
  <!-- fields -->
</form>

ในตัวควบคุม:

$scope.submitForm = function(formValid){
  if(formValid) {
    // Code here if valid
  }
};

— Damsorian
แหล่งที่มา

จะเกิดอะไรขึ้นถ้าฉันต้องการตรวจสอบความถูกต้องของปุ่มหลายปุ่มในแบบฟอร์ม?

— Fahad Mullaji

สิ่งนี้ใช้ได้ผลสำหรับฉัน แต่ทำไม$scope.formName.$validผลลัพธ์ถึงไม่ได้กำหนด?

— ps0604

ถ้าคุณใช้ ng-if แล้ว $ scope.formName $ valid จะไม่ทำงานและถ้าคุณใช้ ng-show แล้ว $ scope.formName $ valid จะทำงาน

— Vaibhav Shaha

2

นี่น่าจะเป็นคำตอบที่ดีที่สุดง่ายๆ แต่คุณสามารถจัดการกับแบบฟอร์มที่ไม่ถูกต้องได้หรือไม่? คุณจะแสดงให้ผู้ใช้เห็นได้อย่างไรว่าอินพุตใดไม่ถูกต้อง?

— Nicolas Leucci

1

@ ps0604 formName.$validสามารถเข้าถึงได้เฉพาะในเทมเพลตหากคุณต้องการเข้าถึงในคอนโทรลเลอร์คุณต้องสร้างวัตถุสำหรับสิ่งนั้น$scope.forms.formNameและในเทมเพลต: <form name="forms.formName"> ตรวจสอบความคิดเห็นนี้

— Damsorian

29

ฉันได้อัปเดตคอนโทรลเลอร์เป็น:

.controller('BusinessCtrl',
    function ($scope, $http, $location, Business, BusinessService, UserService, Photo) {
        $scope.$watch('createBusinessForm.$valid', function(newVal) {
            //$scope.valid = newVal;
            $scope.informationStatus = true;
        });
        ...

— Rober
แหล่งที่มา

โปรดจำไว้ว่า - หากฟอร์มเป็น Modal อย่าลืมประกาศชื่อฟอร์มเป็นสัญกรณ์จุดเช่น "data.theform" และเข้าถึงในคอนโทรลเลอร์ของคุณเป็น $ scope.data.theform

— Jasper

2

สิ่งนี้ไม่ได้ผลสำหรับฉัน โปรดแสดงวิธีที่คุณได้รับ 'createBusinessForm' ใน $ scope ของคอนโทรลเลอร์

— cyrf

สิ่งที่ขอบเขต $ หายไปแล้วตอนนี้เรากำลังใช้vmวิธีการ คุณสามารถสร้าง plunker สำหรับคำตอบเดียวกันโดยใช้ตัวควบคุมเป็นวิธีการทางไวยากรณ์ ฉันไม่สามารถที่จะทำมัน จะเป็นประโยชน์สำหรับคนอื่น ๆ เช่นกันที่กำลังมองหาคำตอบสำหรับบริบทของวันนี้ ขอบคุณ

— ankitd

14

นี่เป็นอีกวิธีหนึ่ง

ตั้งค่าตัวแปรขอบเขตที่ซ่อนอยู่ใน html ของคุณจากนั้นคุณสามารถใช้งานได้จากคอนโทรลเลอร์ของคุณ:

<span style="display:none" >{{ formValid = myForm.$valid}}</span>

นี่คือตัวอย่างการทำงานแบบเต็ม:

angular.module('App', [])
.controller('myController', function($scope) {
  $scope.userType = 'guest';
  $scope.formValid = false;
  console.info('Ctrl init, no form.');
  
  $scope.$watch('myForm', function() {
    console.info('myForm watch');
    console.log($scope.formValid);
  });
  
  $scope.isFormValid = function() {
    //test the new scope variable
    console.log('form valid?: ', $scope.formValid);
  };
});

<!doctype html>
<html ng-app="App">
<head>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
</head>
<body>

<form name="myForm" ng-controller="myController">
  userType: <input name="input" ng-model="userType" required>
  <span class="error" ng-show="myForm.input.$error.required">Required!</span><br>
  <tt>userType = {{userType}}</tt><br>
  <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br>
  <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br>
  
  
  /*-- Hidden Variable formValid to use in your controller --*/
  <span style="display:none" >{{ formValid = myForm.$valid}}</span>
  
  
  <br/>
  <button ng-click="isFormValid()">Check Valid</button>
 </form>
</body>
</html>

ขยายข้อมูลโค้ด

— Enkode
แหล่งที่มา

4

BusinessCtrlเป็น initialised ก่อน'screateBusinessForm FormControllerแม้ว่าคุณจะมีngControllerแบบฟอร์มจะไม่ได้ผลตามที่คุณต้องการ คุณไม่สามารถช่วยสิ่งนี้ได้ (คุณสามารถสร้างไฟล์ngControllerDirectiveและพยายามหลอกล่อลำดับความสำคัญ) นี่คือวิธีการทำงานของ angularjs

ดูตัวอย่างเช่น: http://plnkr.co/edit/WYyu3raWQHkJ7XQzpDtY?p=preview

— โอลิเวอร์
แหล่งที่มา