要求使用Angular 2的兩個字段之一

我正在嘗試創建聯繫表單。該表單看起來像這樣：要求使用Angular 2的兩個字段之一

<form novalidate [formGroup]="contact" (ngSubmit)="send()"> 
    <p> 
    <label>Name 
     <br> 
     <input type="text" class="input" value="" formControlName="name"> 
     <span class="error">Enter your name</span> 
    </label> 
    </p> 
    <p> 
    <label>E-mail 
     <br> 
     <input type="email" class="input" value="" formControlName="email"> 
     <span class="error">It looks like this email is invalid</span> 
    </label> 
    </p> 
    <p> 
    <label>Phone 
     <br> 
     <input type="text" class="input" value="" formControlName="telefone"> 
     <span class="error">It looks like this phone number is invalid</span> 
    </label> 
    </p> 
    <p> 
    <label>Message 
     <br> 
     <textarea type="text" class="input" value="" formControlName="message"></textarea> 
     <span class="error">The message can't be empty</span> 
    </label> 
    </p> 
    <p class="submit"> 
    <input type="submit" name="submit" class="bt" value="Send"> 
    </p> 
</form>

在此表單中只需要郵件和名稱以及電子郵件或電話號碼字段。

我使用的是formBuilder類，所以這裏的打字稿代碼：

this.contact = this.formBuilder.group({ 
    name: ['', Validators.required], 
    email: ['', Validators.compose([/*Use custom validador??*/])], 
    phone: ['', Validators.compose([/*Use custom validador??*/]], 
    message: ['', Validators.required] 
});

我使用自定義的驗證作爲一種解決方案試過，但我無法找出一個解決方案。有什麼建議麼？

來源

2016-12-07 Filipe Costa

是的，自定義驗證程序是要走的路。

讓你的表單組這樣的：

this.contact = this.formBuilder.group({ 
    name: ['', Validators.required], 
    email: ['', Validators.required], 
    phone: ['', Validators.required], 
    message: ['', Validators.required] 
}, {validator: this.customValidationFunction})

然後讓customValidationFunction檢查進行驗證。由驗證只是舉例：（更改p標籤到的div每個替換該控件的名稱，並更改語法隱藏的跨度標籤驗證在適當情況下）

customValidationFunction(formGroup): any { 
    let nameField = formGroup.controls['name'].value; //access any of your form fields like this 
    return (nameField.length < 5) ? { nameLengthFive: true } : null; 
}

更改每個輸入這樣的：

<div [ngClass]="{'has-error':!contact.controls['name'].valid && contact.controls['name'].touched}"> 
    <label>Name</label> 
    <input class="input" type="text" [formControl]="contact.controls['name']"> 
    <span [hidden]="!contact.hasError('nameLengthFive')" class="error">Enter your name</span> 
</div>

來源

2016-12-07 16:01:27 Drew13

爲了顯示自定義錯誤'nameLengthFive'，請記住'FormGroup'上調用hasError，而不是'FormControl'。你在答案中寫得很對，很容易忽略。 –

我創建了一個自定義的驗證指令：

import { 
    FormGroup, 
    ValidationErrors, 
    ValidatorFn, 
    Validators, 
    } from '@angular/forms'; 

    export const atLeastOne = (validator: ValidatorFn, controls:string[] = null) => (
    group: FormGroup, 
): ValidationErrors | null => { 
    if(!controls){ 
     controls = Object.keys(group.controls) 
    } 

    const hasAtLeastOne = group && group.controls && controls 
     .some(k => !validator(group.controls[k])); 

    return hasAtLeastOne ? null : { 
     atLeastOne: true, 
    }; 
    };

要使用它，你只是這樣做：

this.form = this.formBuilder.group({ 
      lastName: [''], 
      firstName:[''], 
      dob:[''], 
      memberId:[''], 
      healthPlans: [[]], 
      sex:[''] 
     }, { validator: atLeastOne(Validators.required, ['dob','memberId']) });

所以dob或memberId將需要在這裏。如果你把它留空，那麼任何帶有值的控件都可以，你可以使用任何類型的Validators。

來源

2018-02-09 21:59:19

要求使用Angular 2的兩個字段之一

回答

相關問題