Question

我有一个包含必填字段的表单 - 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>

在页面加载时，按钮显示“不完整”状态＆＃39;因为没有输入任何字段值，当我输入所有字段时，按钮正在切换到“完成”状态。但当我尝试再次清空任何一个字段时，它不会切换到“不完整”字段。试。

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

有人可以告诉我哪里出错了吗？

Answer 1

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

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

Answer 2

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

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

2 个答案: