Как отображать сообщения об ошибках, когда повторяющиеся значения помещаются в массив AngularJS

Question

Я пытаюсь выполнить проверку на моей веб-странице.Я хочу предотвратить дублирование значений, вводимых при добавлении новых пользователей при заполнении формы и отправке.Необходимо предотвратить повторяющиеся значения, такие как идентификатор emil, фамилия или номер контакта.Я хочу отобразить сообщение об ошибке, что они уже используются.Заранее спасибо.

if (localStorage.getItem("users") === null) {
  $scope.users = [{
      email: "Vai@yahoo.com",
      password: "Sha123",
      firstName: "Vai",
      lastName: "LSha",
      contact: "123-223-8989",
      role: "Super-Admin",
      company: ""
    },
    {
      email: "John@yahoo.com",
      password: "John123",
      firstName: "John",
      lastName: "Doe",
      contact: "281-283-2480",
      role: "Supplier-Admin",
      company: "Apple"
    },
    {
      email: "Ted@yahoo.com",
      password: "Ted123",
      firstName: "Ted",
      lastName: "Lucifer",
      contact: "123-223-2484",
      role: "Buyer-Admin",
      company: "Oneplus"
    }
  ];
  localStorage.setItem("users", JSON.stringify($scope.users));
} else {
  $scope.users = JSON.parse(localStorage.getItem("users"));
}
$scope.companies = [];
var newCompany = JSON.parse(localStorage.getItem("newCompany"));
$scope.companies = newCompany.map(item => item.name)

$scope.saveUser = function() {
  console.log("Saving...");
  $scope.users.push($scope.newUser);
  $scope.info = "New User Added Successfully!";
  $scope.newUser = {};
  localStorage.setItem("users", JSON.stringify($scope.users));
  $scope.addForm.$setPristine()
};

<table class="table table-striped table-hover">
  <thead>
    <tr class="table100-head">
      <th>Email</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Contact</th>
      <th>Role</th>
      <th>Company</th>
      <th>Edit</th>
      <th>Delete</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-if="showUser(user)" ng-repeat="user in users | filter: searchUsers track by $index">
      <td>{{user.email}}</td>
      <td>{{user.firstName}}</td>
      <td>{{user.lastName}}</td>
      <td>{{user.contact}}</td>
      <td>{{user.role}}</td>
      <td>{{user.company}}</td>
      <td>
        <button ng-disabled="checkRole()" type="button" class="btn btn-info" data-toggle="modal" data-target="#myModalEdit" ng-click="selectUser(user)">Edit</button>
      </td>
      <td>
        <button ng-disabled="checkRole()" type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModalDelete" ng-click="selectUser(user)">Delete</button>
      </td>
    </tr>
  </tbody>
</table>

<div>
  <form name="addForm" class="form-horizontal" novalidate>

    <div class="form-group">
      <label class="control-label col-sm-2">Email</label>
      <div class="col-sm-10" ng-class="{ 'has-error' : addForm.addEmail.$invalid && !addForm.addEmail.$pristine }">
        <input type="email" class="form-control" name="addEmail" placeholder="Enter Email" ng-model="newUser.email" ng-required="true">
        <span class="help-block" ng-show="addForm.addEmail.$invalid && !addForm.addEmail.$pristine">
                                        Your Email is required.
                                    </span>
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-sm-2">Password</label>
      <div class="col-sm-10" ng-class="{ 'has-error' : addForm.addPassword.$invalid && !addForm.addPassword.$pristine }">
        <input type="password" class="form-control" name="addPassword" placeholder="Enter New Password" ng-model="newUser.password" ng-required="true">
        <span class="help-block" ng-show="addForm.addPassword.$invalid && !addForm.addPassword.$pristine">
                                        Your Password is required.
                                    </span>
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-sm-2">First Name</label>
      <div class="col-sm-10" ng-class="{ 'has-error' : addForm.addFirstName.$invalid && !addForm.addFirstName.$pristine }">
        <input type="text" class="form-control" name="addFirstName" placeholder="Enter First Name" ng-model="newUser.firstName" ng-required="true">
        <span class="help-block" ng-show="addForm.addFirstName.$invalid && !addForm.addFirstName.$pristine">
                                        Your First Name is required.
                                    </span>
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-sm-2">Last Name</label>
      <div class="col-sm-10" ng-class="{ 'has-error' : addForm.addLastName.$invalid && !addForm.addLastName.$pristine }">
        <input type="text" class="form-control" name="addLastName" placeholder="Enter Last Name" ng-model="newUser.lastName" ng-required="true">
        <span class="help-block" ng-show="addForm.addLastName.$invalid && !addForm.addLastName.$pristine">
                                        Your Last Name is required.
                                    </span>
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-sm-2">Contact</label>
      <div class="col-sm-10" ng-class="{ 'has-error' : addForm.addContact.$invalid && !addForm.addContact.$pristine }">
        <input type="tel" class="form-control" name="addContact" placeholder="Enter Contact" ng-model="newUser.contact" ng-required="true">
        <span class="help-block" ng-show="addForm.addContact.$invalid && !addForm.addContact.$pristine">
                                        Your Contact is required.
                                    </span>
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-sm-2">Role</label>
      <div class="col-sm-10" ng-class="{ 'has-error' : addForm.addRole.$invalid && !addForm.addRole.$pristine }">
        <input type="text" class="form-control" name="addRole" placeholder="Enter Role" ng-model="newUser.role" ng-required="true">
        <span class="help-block" ng-show="addForm.addRole.$invalid && !addForm.addRole.$pristine">
                                        Your Role is required.
                                    </span>
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-sm-2">Company</label>
      <div class="col-sm-10" ng-class="{ 'has-error' : addForm.addCompany.$invalid && !addForm.addCompany.$pristine }">
        <select class="form-control" name="addCompany" placeholder="Select Company" ng-options="company for company in companies" ng-model="newUser.company" ng-required="true">
        </select>
        <span class="help-block" ng-show="addForm.addCompany.$invalid && !addForm.addCompany.$pristine">
                                        Your Company is required.
                                    </span>
      </div>
    </div>

    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default" ng-hide="addForm.$invalid" ng-click="saveUser(); clearInfo()" data-dismiss="modal">Submit</button>
      </div>
    </div>
  </form>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

Answer 1

Полагаю, вам нужно что-то подобное, с некоторой настройкой, конечно:

$scope.saveUser = function() {
    console.log("Saving...");
    const isEmailDuplicated = !!$scope.users.find(user => $scope.newUser.email === user.email);
    const isNameDuplicated = !!$scope.users.find(user => $scope.newUser.lastName === user.lastName);
    const isContactDuplicated = !!$scope.users.find(user => $scope.newUser.contact === user.contact);
    if (isEmailDuplicated || isNameDuplicated || isContactDuplicated) {
        console.log("The user with such profile data already exists");
    } else {
        $scope.users.push($scope.newUser);
        console.log("New User Added Successfully!");
    }
};