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

Posted 2023-03-13

【中文标题】Javascript/Angular2 如何根据表单字段值切换按钮

【英文标题】：Javascript/Angular2 How can I toggle button based on the form field values

【发布时间】：2017-08-26 11:54:42

【问题描述】：

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

在我的 ts 文件中-

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>

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

另外，当我不包括对“未定义”的检查而只包括“”检查时，在页面加载时按钮显示“完成”。不知道为什么会发生这种情况。

谁能告诉我哪里出错了？

【问题讨论】：

你可以设置一个布尔值来检查它formControl是否有效如果它有效你将按钮值更改为完成或真或不完整或假

【参考方案1】：

您不需要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.

【参考方案2】：

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

您应该能够稍微清理一下，因为您正在检查表单字段的两个部分中的错误值。空字符串 undefined 和 null 都将转换为 false 布尔值（您可以在控制台中通过将 !（非）运算符放在值之前来查看它，并在转换为布尔值，每个都是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;

【讨论】：

解释得很好！将 OR 运算符更改为 AND 有效。我还必须同时检查未定义和空检查。