Creé un HTML con campos obligatorios y luego un botón Enviar con ng-click=add().
El código es el siguiente:
Ingrese su nombre: <div class="mb-3"> <label class="form-label">Enter surname:</label> <input type="text" class="form-control" placeholder="Person surname" ng-model= "newPerson.surname" required> </div> <div class="mb-3"> <label class="form-label">Enter age:</label> <input type="text" class="form-control" placeholder="Person age" ng-model= "newPerson.age" required> </div> <div class="mb-3"> <label class="form-label">Enter occupation:</label> <input type="text" class="form-control" placeholder="Person occupation" ng-model= "newPerson.occupation" required> </div> <button type="submit" class="btn btn-primary" ng-click="add()">Add</button> </form>Al presionar el botón agrega a la persona y luego me dice que los campos son obligatorios pero en mi lista ya está la persona habrá valores indefinidos.
He declarado en la parte superior del documento también.
Gracias
También puede usar un método de validación para validar las entradas en el envío en lugar de las requeridas. ejemplo
public validateForm() { if(newPerson.surname === null || newPerson.surname === undefined || newPerson.surname === " ") { error.surname = "Surname is required"; } if(newPerson.age === null || newPerson.age === undefined || newPerson.age === " ") { error.age = "Age is required"; } if(newPerson.occupation === null || newPerson.occupation === undefined || newPerson.occupation === " ") { error.occupation = "Occupation is required"; } if(newPerson.surname !== null || newPerson.surname !== undefined || newPerson.surname !== " " || newPerson.age !== null || newPerson.age !== undefined || newPerson.age !== " " || newPerson.occupation !== null || newPerson.occupation !== undefined || newPerson.occupation !== " ) { this.add(); } } <div class="mb-3"> <label class="form-label">Enter surname:</label> <input type="text" class="form-control" placeholder="Person surname" ng-model= "newPerson.surname" required> </div> <span *ngIf="error.surname"> {{error.surname}}</span> <div class="mb-3"> <label class="form-label">Enter age:</label> <input type="text" class="form-control" placeholder="Person age" ng-model= "newPerson.age" required> </div> <span *ngIf="error.age"> {{error.age}}</span> <div class="mb-3"> <label class="form-label">Enter occupation:</label> <input type="text" class="form-control" placeholder="Person occupation" ng-model= "newPerson.occupation" required> </div> <span *ngIf="error.occupation"> {{error.occupation}}</span> <button type="submit" class="btn btn-primary" ng-click="validateForm()">Add</button> </form>