टेम्पलेट आधारित रूपों को लिखने के कोणीय 2 आरसी 5 तरीके क्या है?

Question

मुझे कहना होगा कि मैं आरसी 5 कोणीय रूपों के बारे में वेब पर विभिन्न ट्यूटोरियल्स द्वारा पूरी तरह उलझन में हूं। आधिकारिक दस्तावेज या तो भ्रम को दूर नहीं करता है।

निर्देशों की बहुतायत (ngForm, ngModel, ngFormControl, ngControl, ngFormControlName, ngControlName, क्या मुझे कुछ याद आया?) कुछ बहिष्कृत हैं, कुछ नहीं हैं।

प्लस, सभी ट्यूटोरियल आसान पथ - सादे पाठ इनपुट या नियंत्रण का चयन करते हैं। और अगर मुझे रेडियो बटन और चेकबॉक्स चाहिए?

संक्षेप में, मुझे नहीं पता कि आरसी 5 में फॉर्म कैसे लिखना है।

वहाँ एक उदाहरण कहीं अप-टू-डेट है है, कि और बताते हैं:

1. 4 बुनियादी नियंत्रण के उपयोग - इनपुट पाठ/रेडियो/चेकबॉक्स और चयन?
2. अतिरिक्त उपहार, जैसे गंदे/प्राचीन, सत्यापन?
3. प्रपत्र मॉडल (FormBuilder, FormGroup, FormControl, आदि ...)

पी.एस.

क्या मैंने पढ़ा?

• https://angular.io/docs/ts/latest/guide/forms.html
• https://scotch.io/tutorials/using-angular-2s-template-driven-forms
• https://scotch.io/tutorials/using-angular-2s-model-driven-forms-with-formgroup-and-formcontrol
• https://angular.io/docs/ts/latest/cookbook/dynamic-form.html
• http://blog.rangle.io/how-angular-2-form-models-work/
• http://blog.rangle.io/data-angular-2-forms/

मैं शायद मूर्ख हूँ, लेकिन मैं अभी भी कर पता नहीं आरसी 5 में फॉर्म लिखने का सही तरीका क्या है।

Answer 1

बात यह है कि मैं angular2 रूपों के बारे में वास्तव में भ्रामक पाया वहाँ दो काफी अलग तरीके हैं वह यह है कि उन्हें बनाने के लिए, और दो तरीके बहुत अच्छी तरह से मिश्रण नहीं करते हैं। आपके पास "टेम्पलेट संचालित" है, जहां फ़ॉर्म को HTML में जितना संभव हो सके बनाया और संभाला जाता है, और उसके बाद आपके पास "मॉडल संचालित" होता है जहां फ़ॉर्म को घटक पक्ष पर संभाला जाता है।

मुझे मिला विभिन्न प्रकारों का सबसे अच्छा विवरण यह वीडियो है, जहां कारा एरिक्सन दोनों का एक डेमो करता है।

https://www.youtube.com/watch?v=E92KS_YCSf8

संक्षेप में::

---

खाका संचालित रूपों

आप अपने सभी प्रपत्र करना चाहते हैं तो वह मतभेद बहुत अच्छी तरह से चारों ओर 10-11 मिनट के निशान बताते हैं टेम्पलेट एचटीएमएल में हैंडलिंग (बाइंडिंग, सत्यापन इत्यादि), इन निर्देशों का उपयोग करें:

• ngModel
• ngModelGroup
• ngForm

---

मॉडल पर ही आधारित रूपों

आप बेहतर नियंत्रण करना चाहते हैं (यह भी रिएक्टिव रूपों के रूप में जाना जाता है), बेहतर testability , कस्टम सत्यापनकर्ता इत्यादि, इन नियंत्रणों का उपयोग कर घटक में मैन्युअल रूप से फॉर्म उत्पन्न करते हैं:

• FormGroup
• FormControl
• FormArray
• वैकल्पिक रूप से एक FormBuilder का उपयोग कुछ बॉयलरप्लेट

कम करने के लिए फिर अपने एचटीएमएल इन इन निर्देशों का उपयोग कर नियंत्रण करने के लिए form और input तत्वों बाँध:

• formControlName
• formGroupName

---

संपादित करें 2016/09/02: अब टेम्पलेट/प्रतिक्रियाशील रूपों के बीच मतभेद का अच्छा कवरेज के साथ आधिकारिक डॉक्स में एक अच्छा रसोई की किताब है: https://angular.io/docs/ts/latest/cookbook/form-validation.html

Answer 2

मुझे फॉर्मबिल्डर पसंद है क्योंकि अधिकांश कोड एचटीएमएल की बजाय टीएस में है, इसलिए बेहतर संकलन समय त्रुटि जांच है। This page from the Angular2 documentation has a simple example।

PrimeNG कुछ महान नियंत्रण कि FormBuilder
का उपयोग इसके अलावा, मैं कुछ code here कि उपयोगी हो सकता है वैध उदाहरण देकर स्पष्ट करने के लिए है है/अमान्य