Javascript / Angular2如何根据表单字段值切换按钮

Posted 2021-04-07

我有一个带有必填字段的表格 - 1.名字2.姓氏3​​.电话4.州5.城市6.出生日期我有一个按钮，根据表格输入切换到完成/不完整。按钮只有当所有字段都具有正确的值时，才应切换为“完成”。如果我再次删除任何值，则该按钮应切换为“未完成”。

在我的文件中 -

formCompleteOrIncomplete(person,index) {
   if (person.dateOfBirth !== "" && person.phone!== "" &&
      (person.firstName !== undefined || person.firstName !== "") && (person.lastName !== undefined || person.lastName !== "") && (person.state !== undefined || person.state !== "") && (person.city !== undefined || person.city !== "" )) {      
      person.status = true;

    }
    else {
      person.status = false;      
    }
} 

在我的html文件中 -

<div class="tag">
   <div class="success" *ngIf="person.status">Complete</div>
   <div class="failed" *ngIf="!person.status">Incomplete</div>
</div>

表格字段 -

   <md-input required [(ngModel)]="person.firstName" (ngModelChange) = "formCompleteOrIncomplete(person, index)" aria-placeholder="First Name" placeholder="First Name" name="firstName" #firstName="ngModel"></md-input>

在页面加载时，按钮显示“未完成”，因为没有输入任何字段值，当我输入所有字段时，按钮正在切换为“完成”但是当我尝试再次清空任何字段时，它不会被切换再次'不完整'。

此外，当我不包括“未定义”的检查并且仅包括“”检查时，在页面加载时按钮显示“完成”。不确定为什么会发生这种情况。

谁能告诉我哪里出错了？

答案

我相信您的问题出在使用if（或）运算符的||语句中。他们应该使用&&（和）运算符，因为您不希望它们是要填充的值中的任何一个。当您在填写其余字段后将第一个名称字段更改为空时，第一个部分检查将通过，因为空字符串不是undefined。

您应该能够清理它，因为您在表单字段的检查的两个部分中检查了错误值。空字符串，undefined和null都将转换为false布尔值（您可以在控制台中通过在值之前放置!（not）运算符来检查它，并看到转换为布尔值时，每个都将是false - 即!''会将空字符串转换为布尔值，然后执行非操作，因此您将在控制台中看到true）。

formCompleteOrIncomplete(person,index) {
    // Inverted the order of your true/false portions to match if statement
    if (!person.dateOfBirth || !person.phone || !person.firstName ||
        !person.lastName || !person.state || !person.city) {
        person.status = false;
    }
    else {
        person.status = true;
    }

    // Or you could do this to keep the same structure of your if statement
    if (!!person.dateOfBirth && !!person.phone && !!person.firstName &&
        !!person.lastName && !!person.state && !!person.city) {
        person.status = true;
    }
    else {
        person.status = false;
    }

    // You could even set the status using your check if you feel comfortable doing that
    person.status =
        !!person.dateOfBirth && !!person.phone && !!person.firstName &&
        !!person.lastName && !!person.state && !!person.city;
}

另一答案

你不需要formCompleteorIncomplete函数或ngModel, ngModelChange etc...。

你应该使用angular2的ReactiveForms。 ReactiveForms是使用表单的首选方法。

像这样：

ngOnInit() {
    this.form= this.formBuilder.group({
      firstName: ['', Validators.required ],// <--- set any validators here
      lastName: ['', Validators.required ],
      ...//and so on...
      })
    });

接下来，添加一个formControlName：

<md-input required formControlName="firstName" aria-placeholder="First Name" placeholder="First Name" name="firstName"></md-input>

最后，您可以像这样切换form.valid按钮:( form.valid更改取决于表单是否有效（基于您在上面设置的验证器）。

<div class="tag">
   <div class="success" *ngIf="form.valid">Complete</div>
   <div class="failed" *ngIf="!form.valid">Incomplete</div>
</div>

Check this site out for an example.