Question

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

我试图逐一检查每个属性，但条件无穷无尽，我不认为这是我唯一的解决方案。

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

Answer 1

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

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>

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

2 个答案: