如何检查模型属性是否为空？

Question

正如标题所说。我正在构建我的第一个 Web 应用程序，我想进行基本的表单验证。它工作正常，但我在向服务器发送 post 请求的方法中遇到了一些问题。它会向服务器发送请求，即使我没有填写所有表单字段并且模型的某些属性为空。

我试图一一检查每个属性，但有无穷无尽的 'if' 条件，我不相信这是我唯一的解决方案。

是否有任何可用的方法来检查任何给定模型属性是否为空？

Answer 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
   }    
}

--------------------方法二：无表格-------------------- --

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
  }
}

Answer 2

尝试使用响应式表单。将您的控制器分组到一个表单组中，并向每个控制器添加验证器，以便用户在未完成所有必填字段的情况下无法处理表单数据。如果表单数据无效（或不正确），您可以在 OnSubmit 函数中检查并停止数据处理。

查看以下链接：

Reactive Forms Angular

Form Validation Angular

你可以看下面我的例子：

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>

如何检查模型属性是否为空？

How to check if any of model property is null?

typescript

angular

angular7

如何检查模型 属性 是否为空？

How to check if any of model property is null?

typescript

angular

angular7

如何检查模型属性是否为空？