Как проверить, является ли какое-либо из свойств модели нулевым?

Question

Как следует из названия.Я создаю свое первое веб-приложение и хочу выполнить базовую проверку формы.Это работает нормально, но у меня есть некоторые проблемы в методе, который отправляет запрос на сервер.Он отправляет запрос на сервер, хотя я не заполнил все поля формы, а некоторые свойства модели пусты.

Я пытался проверить каждое свойство по одному, но существуют бесконечные условия «если»и я не верю, что это единственное решение, которое у меня есть.

Есть ли какой-либо доступный метод, который проверяет, является ли ЛЮБОЙ из данных свойств модели нулевым?

Answer 1

Попробуйте использовать реактивные формы. Сгруппируйте свои контроллеры в группу форм и добавьте валидаторы для каждого контроллера, чтобы пользователь не мог обработать данные формы без заполнения всех обязательных полей. Затем вы можете проверить в функции OnSubmit, являются ли данные формы недействительными (или нет), и остановить обработку данных.

Обратите внимание на следующие ссылки:

Реактивные формы угловые

Проверка формы угловая

Вы можете увидеть мой пример ниже:

export class AppComponent implements OnInit {

    registerForm: FormGroup;
    submitted = false;

    constructor(private formBuilder: FormBuilder) { }

    ngOnInit() {
        this.registerForm = this.formBuilder.group({
            firstName: ['', Validators.required],
            lastName: ['', Validators.required],
        });
    }

    onSubmit() {
        this.submitted = true;
        // stop here if form is invalid
        if (this.registerForm.invalid) {
            return;
        }

        //process data HERE after checking if the form is invalid
    }

}

HTML-код

<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
    <div class="form-group">
        <label>First Name</label>
        <input type="text" formControlName="firstName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.firstName.errors }" />
        <div *ngIf="submitted && f.firstName.errors" class="invalid-feedback">
            <div *ngIf="f.firstName.errors.required">First Name is required</div>
             </div>
        </div>
        <div class="form-group">
            <label>Last Name</label>
            <input type="text" formControlName="lastName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.lastName.errors }" />
            <div *ngIf="submitted && f.lastName.errors" class="invalid-feedback">
                <div *ngIf="f.lastName.errors.required">Last Name is required</div>
                </div>
            </div>
    </div>
</form>

Answer 2

Подход 1: Проверка формы

Component.html

<form #testForm (ngSubmit)="save()">
 <input  required  [(ngModel)]="model.value1">
 <input  required  [(ngModel)]="model.value2">
 <input type="submit" type="button">
</form>

Component.Ts

 @ViewChild("testForm ") testForm : NgForm | undefined;
 model:any={value1:"",value2:""};

 save()
{
  if( testForm.valid)
   {
      //save  to data base or play
   }    
}

---

------------------- Подход 2: Без формы -----------------------

Component.ts
//suppose you have model object like below
model:any={value1:"",value2:""};
save()
{
  let valid:boolean=true;
  for(let key of Object.keys(model)
   {
     if(!model[key])
      {
          valid=false;
      }
   }
 if(Valid)
  {
   // save to database or play
  }
}