Angularjs 在webapi核心中使用ModelState进行角度JS表单验证

我正在开发一个Web应用程序，客户端使用AngularJS、TypeScript和HTML，服务器端使用.NET核心Web API

我想使用ModelState和dto实现服务器端验证。问题是，我不想在表单顶部显示所有验证错误，但我想在文本框中显示它们

因此，首先我将验证添加到DTO，然后在控制器中检查

ModelState.IsValid

public class TestDTO
{
    [Required(ErrorMessage = "This field is required")]
    public string TestName { get; set; }
}

public class ManyTestDTO
{
    [Required(ErrorMessage = "Many Item is required")]
    public string ManyItem { get; set; }
}

public class RestaurantDTO
{
    public int RestaurantId { get; set; }

    [Required(ErrorMessage = "This field is required")]
    public string Name { get; set; }

    [Required(ErrorMessage = "This field is required"), MaxLength(20), MinLength(1)]
    public string Description { get; set; }

    [Required(ErrorMessage = "This field is required")]
    public string Address { get; set; }

    public TestDTO TestModel { get; set; }

    public List<ManyTestDTO> TestMany { get; set; }

    public RestaurantDTO()
    {
    }

}

控制员：

class CreateRestaurantController {

    static $inject = ["$scope"];

    restaurantModel: any;
    modelState: any;
    parsedModelState: any;
    testModelState:any;


    constructor($scope) {
        this.scope = $scope; // create a local copy of the $scope
        this.scope.controller = this; //put controller reference in this.scope.controller

        this.restaurantModel = {name: "Dawood",testModel: {},testMany: [{ ManyItem: "I have a Value" },{}]};
        this.modelState = null;
        this.parsedModelState = {};

        this.testModelState = JSON
            .parse('{"Address":["This field is required"],"Description":["This field is required"],"TestModel.TestName":["This field is required"],"TestMany[1].ManyItem":["Many Item is required"]}');

        console.log(this.testModelState);
    }


    testValidation() {

        this.modelState = this.testModelState;
        //Normally modelStae  will be return from server

        // Submit to Server

        //this.apiService.post("/api/RestaurantDashboard/GetTestValidation",
        //    null, this.restaurantModel,
        //    response => {
        //        console.log(response);
        //    },
        //    response => {
        //        this.modelState = response.data;
        //    });
    }
}

表单的HTML

<div ng-app="validationApp">

  <div ng-controller="validationController">

    <form name="restaurantForm" class="form">

      <div class="form-group" ng-class="{'has-error': controller.parsedModelState.Name != null}">
        <label>Restaurant Name</label>
        <input type="text" class="form-control" ng-server-validate="Name" ng-model="controller.restaurantModel.name">
        <span class="help-block" ng-repeat="errorMessage in controller.parsedModelState.Name"> {{errorMessage}} </span>
      </div>

      <div class="form-group" ng-class="{'has-error': controller.parsedModelState.Address != null}">
        <label>Address</label>
        <input type="text" class="form-control" ng-server-validate="Address" ng-model="controller.restaurantModel.address">
        <span class="help-block" ng-repeat="errorMessage in controller.parsedModelState.Address"> {{errorMessage}} </span>
      </div>

      <h3>Nested Object</h3>
      <div class="form-group" ng-class="{'has-error': controller.parsedModelState['TestModel.TestName'] != null}">
        <label>TestModel.TestName</label>
        <input type="text" class="form-control" ng-server-validate="TestModel.TestName" ng-model="controller.restaurantModel.testModel.testName">
        <span class="help-block" ng-repeat="errorMessage in controller.parsedModelState['TestModel.TestName']"> {{errorMessage}} </span>
      </div>


      <h3>Many Array/List</h3>

      <ul class="list-unstyled">
        <li ng-repeat="item in controller.restaurantModel.testMany">
          <div class="form-group" ng-class="{'has-error': controller.parsedModelState['TestMany[' + $index + '].ManyItem'] != null}">
            <label>Many Item {{$index}}</label>
            <input type="text" class="form-control" ng-server-validate="{{'TestMany[' + $index + '].ManyItem'}}" ng-model="item.ManyItem">
            <span class="help-block" ng-repeat="errorMessage in controller.parsedModelState['TestMany[' + $index + '].ManyItem']"> {{errorMessage}} </span>
          </div>
        </li>
      </ul>

      <button class="btn btn-primary" ng-click="controller.testValidation()">Click Me to Check</button>

    </form>
  </div>

</div>

餐厅名称
{{errorMessage}}
地址
{{errorMessage}}
嵌套对象
TestModel.TestName
{{errorMessage}}
许多数组/列表


多项目{{$index}
{{errorMessage}}


点击我查看

正如您所看到的，

Many数组/列表

和

嵌套对象

的HTML结构有点复杂。有更好的方法吗

---

小提琴手：你检查过ng消息了吗？下面是一个示例：我建议您在客户端（angularjs）中实现表单验证。然后，在服务器端（asp.net核心）中创建另一个验证。angularjs验证对于提供良好的用户体验和避免向服务器发送不必要的帖子非常重要。但是，asp.net核心验证是重要的，因为智能用户可以破解客户端验证，但不能破解服务器端验证。我也同意fabricio的观点，客户端使用angular，服务器端使用fluent validator。Fluent validator也适用于angular，即您所追求的那种验证

<div ng-app="validationApp">

  <div ng-controller="validationController">

    <form name="restaurantForm" class="form">

      <div class="form-group" ng-class="{'has-error': controller.parsedModelState.Name != null}">
        <label>Restaurant Name</label>
        <input type="text" class="form-control" ng-server-validate="Name" ng-model="controller.restaurantModel.name">
        <span class="help-block" ng-repeat="errorMessage in controller.parsedModelState.Name"> {{errorMessage}} </span>
      </div>

      <div class="form-group" ng-class="{'has-error': controller.parsedModelState.Address != null}">
        <label>Address</label>
        <input type="text" class="form-control" ng-server-validate="Address" ng-model="controller.restaurantModel.address">
        <span class="help-block" ng-repeat="errorMessage in controller.parsedModelState.Address"> {{errorMessage}} </span>
      </div>

      <h3>Nested Object</h3>
      <div class="form-group" ng-class="{'has-error': controller.parsedModelState['TestModel.TestName'] != null}">
        <label>TestModel.TestName</label>
        <input type="text" class="form-control" ng-server-validate="TestModel.TestName" ng-model="controller.restaurantModel.testModel.testName">
        <span class="help-block" ng-repeat="errorMessage in controller.parsedModelState['TestModel.TestName']"> {{errorMessage}} </span>
      </div>


      <h3>Many Array/List</h3>

      <ul class="list-unstyled">
        <li ng-repeat="item in controller.restaurantModel.testMany">
          <div class="form-group" ng-class="{'has-error': controller.parsedModelState['TestMany[' + $index + '].ManyItem'] != null}">
            <label>Many Item {{$index}}</label>
            <input type="text" class="form-control" ng-server-validate="{{'TestMany[' + $index + '].ManyItem'}}" ng-model="item.ManyItem">
            <span class="help-block" ng-repeat="errorMessage in controller.parsedModelState['TestMany[' + $index + '].ManyItem']"> {{errorMessage}} </span>
          </div>
        </li>
      </ul>

      <button class="btn btn-primary" ng-click="controller.testValidation()">Click Me to Check</button>

    </form>
  </div>

</div>