Próbuję utworzyć proste formularze reaktywne kątowe z e-mailem i numerem telefonu. Poniżej znajduje się mój kod. Tutaj stoję w obliczu dwóch problemów.

  1. Początkowo weryfikuj przycisk powinien być wyłączony. Powinien być włączony tylko Po wprowadzeniu pola poczty elektronicznej.

  2. Drugi problem polega na tym, że włączony jest tylko jedno pole. Jeśli Użytkownik rozpoczyna wpisywanie wiadomości e-mail, a następnie numer telefonu powinien być wyłączony i odwrotnie. Przycisk zapisu zostanie włączony, jeśli zostanie wprowadzony e-mail lub telefon

Jak to osiągnąć?

<form [formGroup]="personalDtlsForm">
  <div class="form-group" [ngClass]="displayFieldCss('inputValue')">
    <div class="row">
      <div class="col">
        <label for="inputValue" class="control-label required">Email</label>
      </div>
    </div>
    <div class="row">
      <div class="col-9">
        <input type="text" id="email" class="form-control" formControlName="inputValue">
      </div>
      <div class="col-3">
        <button type="button" id="verifyBtn" class="btn btn-primary btn-large" (click)="verify()">Verify</button>
      </div>
    </div>

  </div>

  <div class="form-group row" [ngClass]="displayFieldCss('phoneNo')">
    <div class="col paddingTop">
      <label for="phoneNo" class="userID control-label textColor">Phone
      </label>
      <input type="number" class="form-control" id="phoneNo" formControlName="phoneNo">
    </div>
  </div>
  <div class="viewdetailbtn">
    <button type="button" [disabled]="!personalDtlsForm.valid" class="btn btn-primary btn-large btnwidth marginBottom" (click)="savePersonalDtls()">Save</button>
  </div>
</form>


this.personalDtlsForm = this.formBuilder.group({
  inputValue: [null, [Validators.required, Validators.email]],
      phoneNo: [null, Validators.required]
});
2
Nancy 4 czerwiec 2018, 09:15

3 odpowiedzi

Najlepsza odpowiedź

Początkowo weryfikuj przycisk powinien być wyłączony. Powinien być włączony, tylko wtedy, gdy wprowadza się pole e-mail.

Możesz po prostu wiązać disabled z poprawnym statusem {x1}}. Wspomnij, że gdy status wejścia jest wyłączony, nie będzie valid lub invalid.

<button type="button" [disabled]="personalDtlsForm.get('inputValue').invalid">Verify</button>

Drugi problem polega na tym, że włączony jest tylko jedno pole. Jeśli użytkownik zaczyna wpisywać pocztą elektroniczną, numer telefonu powinien być wyłączony i odwrotnie.

Aby wyłączyć wszystkie inne elementy sterujące w formularzu, najpierw będziemy musieli uzyskać do nich dostęp do wszystkich, możemy to zrobić za pomocą {X0}} .
Stworzyłem niestandardową dyrektywę, aby osiągnąć to, co chcesz.

@Directive({
  selector: '[disableAllOthers]'
})
export class DisableAllOthers {
  constructor(
    private elem: ElementRef, 
    private control: NgControl,
    private renderer: Renderer2
  ) {
    this.elem.nativeElement.addEventListener('mouseover', () => {
      (this.control as FormControlName).formDirective.directives.forEach(elem => {
        if (elem === this.control) {
          elem.control.enable();
        } else {
          elem.control.disable();
        }
      });
    });
  }
}

Dla focus / focus zdarzenie nie wystrzeli, gdy wejście jest wyłączone, tutaj zmieniłem disable/enable przez myszy przez Event, patrz Demo .

2
Pengyy 4 czerwiec 2018, 08:54

Możesz włączyć / wyłączyć kontrolę za pomocą:

this.personalDtlsForm.controls['phoneNo'].enable()

this.personalDtlsForm.controls['phoneNo'].disable()

Aby wyłączyć pole, które musisz subskrybować na drugim polu {x0}} i wyłączyć inne pole, jeśli value !== '' lub coś takiego.

Przykład:

this.personalDtlsForm.controls['phoneNo'].valueChanges.subscribe(
    value => {
        if(value !== ''){
            this.personalDtlsForm.controls['inputValue'].disable();
        } else {
            this.personalDtlsForm.controls['inputValue'].enable();
        }
    }
);

I oczywiście tego samego rodzaju subskrypcji na inputValue formControl

W przypadku drugiego pytania można ustawić zmienną isFormValid w instrukcji IF, gdy value !== '', co oznacza przynajmniej jeden z nich.

Ostateczny czek, aby włączyć przycisk, może być coś w rodzaju:

isFormValid && personalDtlsForm.valid

6
Venomy 4 czerwiec 2018, 10:42

Jeśli używasz podejścia reaktywnego formatu, aby wziąć wejścia od użytkownika, a następnie chcesz włączyć lub wyłączyć pola oparte na działaniu użytkownika. Więc możesz wykonać następujące czynności ...

Załóżmy, że twoja formgroup wygląda tak ->

// cityRef field will be automatically disabled intially, as property disabled: true is set

this.signUpFrom = new FormGroup({
      userData: new FormGroup({
        mobileNumber: new FormControl(null, [Validators.required, Validators.minLength(10), Validators.maxLength(10)]),
        password: new FormControl(null, [Validators.required]),
        userType: new FormControl('VENDOR')
      }),
      otherData: new FormGroup({
        cityRef: new FormControl({ value: null, disabled: true }, [Validators.required]),
        email: new FormControl(null, [Validators.required, Validators.email]),
        address: new FormControl(null, [Validators.required])
      }),
      name: new FormControl(null, [Validators.required]),
    });

Teraz, jeśli chcesz wyłączyć / włączyć e-mail, hasło, nazwę itp., Na podstawie działań użytkownika. Możesz to zrobić za jednym kroku. (Przykład dostępu do różnych pól)

this.signUpFrom.get('otherData.email').enable(); // To enable
this.signUpFrom.get('otherData.email').disable(); // To disable

this.signUpFrom.get('userData.password').enable(); // To enable
this.signUpFrom.get('userData.password').disable(); // To disable

this.signUpFrom.get('name').enable(); // To enable name field
this.signUpFrom.get('name').disable(); // To disable name field

Możesz umieścić te kody w funkcji, które można wywołać w ONCLICK lub w Onchanges itp.

Nawet możesz uzyskać aktualną sytuację Pogoda w dziedzinie, jest wyłączona lub włączona za pomocą

this.signUpFrom.get('name').disabled; // return true if disabled
this.signUpFrom.get('name').enabled; // return true if enabled

Może spóźnić się odpowiedzieć na to pytanie, ale odkąd znalazłem przydatne, pomyślałem, że odpowiem, ponieważ może to być pomocne dla ciebie lub kogoś innego!

0
Aman Kumar Gupta 6 kwiecień 2020, 18:23