Mam formularz reaktywny w Angular jak poniżej:
this.AddCustomerForm = this.formBuilder.group({
Firstname: ['', Validators.required],
Lastname: ['', Validators.required],
Email: ['', Validators.required, Validators.pattern(this.EMAIL_REGEX)],
Picture: [''],
Username: ['', Validators.required],
Password: ['', Validators.required],
Address: ['', Validators.required],
Postcode: ['', Validators.required],
City: ['', Validators.required],
Country: ['', Validators.required]
});
createCustomer(currentCustomer: Customer)
{
if (!this.AddCustomerForm.valid)
{
//some app logic
}
}
this.AddCustomerForm.valid zwraca wartość false, ale wszystko wygląda dobrze.
Próbowałem znaleźć, sprawdzając właściwość statusu w kolekcji formantów. Ale zastanawiam się, czy istnieje sposób na znalezienie nieprawidłowych i wyświetlenie ich użytkownikowi?
Odpowiedzi:
Możesz po prostu powtórzyć każdą kontrolę i sprawdzić status:
źródło
findInvalidControls()
ci zwracaWłaśnie walczyłem z tym problemem: każde pole formularza jest prawidłowe, ale sam formularz jest nieprawidłowy.
Okazuje się, że ustawiłem 'Validator.required' na FormArray, gdzie kontrolki są dodawane / usuwane dynamicznie. Więc nawet jeśli FormArray był pusty, nadal był wymagany i dlatego formularz był zawsze nieprawidłowy, nawet jeśli wszystkie widoczne kontrolki zostały poprawnie wypełnione.
Nie znalazłem nieprawidłowej części formularza, ponieważ moja funkcja `` findInvalidControls '' sprawdzała tylko FormControl, a nie FormGroup / FormArray. Więc trochę to zaktualizowałem:
źródło
W sekcji DevTools w Chrome wybierz kartę Console.
W konsoli wpisz polecenie:
Wynik powinien być podobny do tego:
W tym przypadku podkreślony tekst dotyczy kontrolki formularza
listen-address
. Otoczony tekst:.ng-invalid
wskazuje, że formant jest nieprawidłowy.źródło
Zarówno formularze, jak i wszystkie kontrolki rozszerzają klasę kątową AbstractControl. Każda implementacja ma metodę dostępu do błędów walidacji.
Dokumentacja API zawiera wszystkie odniesienia https://angular.io/api/forms/AbstractControl
Edytować
Myślałem, że akcesor błędu działał w ten sposób, ale ten link do github pokazuje, że są inni ludzie, którzy myśleli tak samo jak ja https://github.com/angular/angular/issues/11530
W każdym przypadku za pomocą metody dostępu do formantów można iterować po wszystkich formControls w formularzu.
źródło
Teraz, w Angular 9, możesz użyć metody markAllAsTouched () do pokazania walidatorów nieprawidłowych kontrolek:
źródło
Jeśli nie masz zbyt wielu pól w formularzu, możesz po prostu F12 i najechać kursorem na kontrolkę, zobaczysz wyskakujące okienko z nieskazitelnymi / dotkniętymi / prawidłowymi wartościami pola- "# nazwa_pola.form-control.ng- untouched.ng-invalid ”.
źródło
Myślę, że powinieneś spróbować użyć
this.form.updateValueAndValidity()
lub spróbować wykonać tę samą metodę w każdym z elementów sterujących.źródło
Spróbuj tego
źródło
Spowoduje to zarejestrowanie wszystkich nazw kontrolek 😊
for (let el in this.ReactiveForm.controls) { if (this.ReactiveForm.controls[el].errors) { console.log(el) } }
możesz zrobić z tego tablicę lub łańcuch i wyświetlić ją użytkownikowi
źródło
Pozwoliłem sobie poprawić kod AngularInDepth.com -s, tak aby rekurencyjnie wyszukiwał również nieprawidłowe dane wejściowe w zagnieżdżonych formularzach. Czy będzie zagnieżdżony przez FormArray-s lub FormGroup-s. Po prostu wprowadź formGroup najwyższego poziomu, a zwróci wszystkie elementy FormControls, które są nieprawidłowe.
Możesz ewentualnie przejrzeć niektóre z kontroli typu „instanceof”, jeśli oddzieliłbyś kontrolę FormControl i dodanie do funkcji nieprawidłowej tablicy w osobnej funkcji. To sprawiłoby, że funkcja wyglądałaby o wiele bardziej czysto, ale potrzebowałem globalnej, pojedynczej funkcji, opcji, aby uzyskać płaską tablicę wszystkich nieprawidłowych formControls i to jest rozwiązanie!
Tylko dla tych, którzy tego potrzebują, więc nie muszą sami kodować.
Edytuj nr 1
Zażądano, aby zwracał również nieprawidłowe FormArray-s i FormGroups, więc jeśli tego również potrzebujesz, użyj tego kodu
źródło
możesz rejestrować wartość formularza
console.log(this.addCustomerForm.value)
, będzie konsolidować wszystkie wartości kontrolki, a następnie pola „” (puste) wskazują nieprawidłowe kontrolkiźródło