Angular 2需要表单组中的两个项目之一

Question

我想验证具有三个字段的被动表单。用户名始终是必填字段，但我只希望用户除了输入用户名之外，还必须输入电话号码或电子邮件，我无法弄清楚如何操作。

我试过嵌套窗体组和自定义验证器，我也尝试了解决方案here，但没有运气。

这是我目前的HTML表单：

<div class="container"><br> 
    <form [formGroup]="signupForm" (ngSubmit)="onSubmit()"> 
    <div class="form-group"> 
     <label for="username">Username</label> 
     <input type="text" id="username" formControlName="username" class="form-control"> 
     <span *ngIf="!signupForm.get('username').valid && hasBeenSubmitted == true" style="color: red">Please enter a valid username!</span> 
    </div> 
    <br><hr> 
    <div formGroupName="userdata"> 
     <div class="form-group"> 
     <label for="email">email</label> 
     <input type="text" id="email" formControlName="email" class="form-control"> 
     </div> 
or <br> 
     <div> 
     <label for="phoneNumber">phone</label> 
     <input type="text" formControlName="phoneNumber"> 
     </div> 
    </div> 
    <hr> 
    <button class="btn btn-primary" type="submit">Submit</button> 
     <span *ngIf="!signupForm.get('userdata.email').valid && hasBeenSubmitted == true && hasBeenSubmitted == true && !signupForm.get('userdata.email').valid 
     && hasBeenSubmitted == true" style="color: red">Please enter a valid email or phone number!</span> 
    </form> 
</div> 

我的打字稿：

export class AppComponent implements OnInit { 
    signupForm: FormGroup; 
    hasBeenSubmitted = false; 
    ngOnInit() { 
    this.signupForm = new FormGroup({ 
     'username': new FormControl(null, Validators.required), 
     'nickname': new FormControl(null, Validators.required), 
     // Nested formgroup: 
     'userdata': new FormGroup({ 
     'email': new FormControl(null, [Validators.required, Validators.email]), 
     'phoneNumber': new FormControl(null, [Validators.required]), 
     }), 
    }); 
    } 

    onSubmit() { 
    this.hasBeenSubmitted = true; // I use this variable to validate after submission 
    } 
} 

当用户提交表单而不需通过电子邮件或电话号码，我想错误文本阅读： Please enter a valid email or phone number!。当用户开始输入有效的电子邮件或电话号码时，这将解决。

如何验证我的表单，以便用户只需输入用户名和电话号码，或用户名和电子邮件地址即可使表单有效？

Plunkr我当前的代码： https://plnkr.co/edit/1IyVQblRX1bZxOXIpyQF?p=preview

Answer 1

正如你所说，你可以使用自定义的验证为组：

this.signupForm = new FormGroup({ 
    'username': new FormControl(null, Validators.required), 
    'nickname': new FormControl(null, Validators.required), 
    // Nested formgroup: 
    'userdata': new FormGroup({ 
    'email': new FormControl(null), 
    'phoneNumber': new FormControl(null), 
    }, this.validateUserData) 
}); 

其中validateUserData方法是这样的：

validateUserData(formGroup) { 
    const emailCtrl = formGroup.get('email'); 
    const phoneCtr = formGroup.get('phoneNumber'); 

    if (emailCtrl.value && !Validators.email(emailCtrl) || phoneCtr.value) { 
    return null; 
    } 

    return { required: true }; 
} 

和最后你需要做的是改变模板，如：

<span *ngIf="!signupForm.get('userdata').valid && hasBeenSubmitted" ...> 
    Please enter a valid email or phone number! 
</span> 

Forked Plunker