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

【问题标题】：How to check if any of model property is null?如何检查任何模型属性是否为空？
【发布时间】：2019-07-10 06:30:47
【问题描述】：

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

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

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

【问题讨论】：

能分享一下你的验证码吗，帮帮忙会容易很多
如果表单无效，则不允许提交。也请分享一些代码，以帮助其他人查明问题所在。
仔细阅读 Angular 文档 here 的表单验证部分。或者找到关于 Angular 表单验证 主题的优秀教程。除非所有字段都有有效条目，否则有办法停止表单提交。
如果您不想为每个表单项设置一个空值集 Validators.required。当不是每个字段都填写时，这会使表单无效。然后您可以在提交之前简单地检查 form.valid 属性。
所有字段都是必填项？

标签： angular typescript angular7

【解决方案1】：

方法 1：表单验证

组件.html

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

组件.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
  }
}

【讨论】：

【解决方案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>

【讨论】：