フォームグループ内の2つの項目の1つを必要とする角2

Question

3つのフィールドを持つ反応形式を検証しようとしています。ユーザー名は常に必須フィールドですが、ユーザー名に加えて電話番号または電子メールのどちらかを入力する必要があります。その方法を理解することはできません。

ネストされたフォームグループとカスタムバリデーターを試してみましたが、私は解決策を試しましたが、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> 

そして、私のtypescriptです：

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

あなたはグループ用のカスタムバリデータを使用することができます言ったように：

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 }; 
} 

と最後：validateUserData方法がどのように見える

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) 
}); 

あなたがする必要があるものは、テンプレートを変更することです：

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

Forked Plunker