Це відео не доступне.
Перепрошуємо.

Angular form control and form group

Поділитися
Вставка
  • Опубліковано 23 вер 2018
  • In this video we will discuss FormControl and FormGroup classes
    Text version of the video
    csharp-video-tu...
    Healthy diet is very important for both body and mind. We want to inspire you to cook and eat healthy. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking.
    / @aarvikitchen5572
    Slides
    csharp-video-tu...
    Angular 6 Tutorial
    • Angular 6 tutorial for...
    Angular 6 Tutorial Text Articles & Slides
    csharp-video-tu...
    Angular, JavaScript, jQuery, Dot Net & SQL Playlists
    www.youtube.co...
    When working with reactive forms we create instances of FormControl and FormGroup classes to create a form model.
    To bind an HTML form tag in the template to the FromGroup instance in the component class, we use formGroup directive
    To bind an HTML input element in the template to the FormControl instance in the component class, we use formControlName directive
    formGroup and formControlName directives are provided by the ReactiveFormsModule
    Both FormControl and FormGroup classes inherit from AbstractControl base class
    The AbstractControl class has properties that help us track both FormControl and FormGroup value and state
    The following are some of the useful properties provided by the AbstractControl class
    value
    errors
    valid
    invalid
    dirty
    pristine
    touched
    untouched
    FormControl instance tracks the value and state of the individual html element it is associated with
    FormGroup instance tracks the value and state of all the form controls in it's group
    To see the form model we created using FormGroup and FormControl classes, log the employeeForm to the console.
    onSubmit(): void {
    console.log(this.employeeForm);
    }
    To access a FormControl in a FormGroup, we can use one of the following 2 ways.
    employeeForm.controls.fullName.value
    employeeForm.get('fullName').value
    Note: This same code works, both in the template and component class.
    In addition to these properties, AbstractControl also provides the following methods. In our upcoming videos we will use these properties and methods for form validation and working with data.
    setValidators()
    clearValidators()
    updateValueAndValidity()
    setValue()
    patchValue()
    Reset()

КОМЕНТАРІ • 31

  • @bernadettealvarado6804
    @bernadettealvarado6804 2 роки тому

    These videos are amazing! I've been surviving school because of you. Thank you! :)

  • @codewithfarzad
    @codewithfarzad 4 роки тому

    hey man, your are the best teacher in the world!

  • @mirjana72003
    @mirjana72003 5 років тому +1

    Your videos always provide a ton of excellent tips, thanks a million!!! :)

  • @DemPilafian
    @DemPilafian 5 років тому

    Angular is bloated and convoluted, but this video is pretty darn good... nice, clear explanation of *FormGroup* and *FormControl* concepts plus how to explore the detailed information they contain. 👍

  • @brajakisorpalei7403
    @brajakisorpalei7403 5 років тому +4

    Sir, please upload remaining videos.Especially Authentication and authorization and Globally error Handler if possible.

  • @rahulkamboj4603
    @rahulkamboj4603 5 років тому

    Good explanation about formGroup and formControl. Awesome

  • @jifri-hasanmon7230
    @jifri-hasanmon7230 5 років тому

    Good and Clear , Very helpful to students

  • @elgrito9688
    @elgrito9688 4 роки тому

    Very interesting! Thanks a lot for that lesson!

  • @fazrinfarook7557
    @fazrinfarook7557 3 роки тому

    Outstanding explanation

  • @sanjayrawat1537
    @sanjayrawat1537 5 років тому

    sir, one of the important control is to upload the file through web form, kindly include this particular field in the form controls to add/modify and delete operation

  • @vishaltaywade8069
    @vishaltaywade8069 5 років тому

    nicely your presenting complex part.. thanks a lot!!!

  • @VigneshwaranChandrasekaranA
    @VigneshwaranChandrasekaranA 5 років тому

    Good explanation about formGroup and formControl, thank you...

  • @sriharsha7314
    @sriharsha7314 5 років тому

    Where can I get the code snippets for this? I checked the blogspot url. Didnt get anything

  • @akashmakde2683
    @akashmakde2683 3 роки тому

    excellent explaination

  • @saifumar3001
    @saifumar3001 4 роки тому +1

    Anyone looking for table with form control and group properties from 7:53 .

    Form Group
    FormControl (fullName)



    Touched : {{emplyoeeForm.touched}}
    dirty : {{emplyoeeForm.dirty}}
    valid : {{emplyoeeForm.valid}}
    Form Values : {{emplyoeeForm.value | json}}


    Touched : {{emplyoeeForm.get('fullName').touched}}
    dirty : {{emplyoeeForm.get('fullName').dirty}}
    valid : {{emplyoeeForm.get('fullName').valid}}
    Full Name Value : {{emplyoeeForm.get('fullName').value}}

  • @jumpatarun
    @jumpatarun 5 років тому

    Excellent videos! - Can you please post videos on Master and Detail grid - Thanks!

  • @rezokobaidze8501
    @rezokobaidze8501 5 років тому

    thanks you have very good explanation

  • @VipinKumarSainivipin
    @VipinKumarSainivipin 5 років тому

    Sir, please suggest how can we do encryption and decryption in angular?

  • @ymtan
    @ymtan 5 років тому

    Dear Venkat,
    Regarding the following html code, I would like to ask why the valid property value for both FormGroup and FormControl are true when we did not type anything in the Full Name field and Email field ?
    Shouldn't the valid property value for both FormGroup and FormControl are suppose to be false when we did not type anything within the Full Name field and Email field ?
    FormGroup
    FormControl (fullName)

    touched : {{ employeeForm.touched }}
    dirty : {{ employeeForm.dirty }}
    valid : {{ employeeForm.valid }}
    Form Values : {{employeeForm.value | json}}

    touched : {{ employeeForm.get('fullName').touched }}
    dirty : {{ employeeForm.get('fullName').dirty }}
    valid : {{ employeeForm.get('fullName').valid }}
    FullName Value : {{employeeForm.get('fullName').value}}

    Best regards,
    Edward

    • @gauravbhatt8476
      @gauravbhatt8476 5 років тому

      Those controls are not been validated...i.e. no required validation or other form of validation is set on those controls

    • @Csharp-video-tutorialsBlogspot
      @Csharp-video-tutorialsBlogspot  5 років тому

      No, the form control and form group are valid because we have not specified any validation attributes on the form controls in the from group. For example, if have specified required attribute on the form control, and then when the field is empty, that's when the valid state will be false. Hope this answers your question. Gaurav point below reiterates the same. Thank you Gaurav.

  • @kirthiramakrishna393
    @kirthiramakrishna393 3 роки тому

    Is this coding still same with latest Angular 11/12?

  • @akhilbabu1157
    @akhilbabu1157 4 роки тому

    very good explanation

  • @TapanDubey
    @TapanDubey 4 роки тому

    Nice Video , Thank you for sharing #TapanDubey

  • @kzev
    @kzev 5 років тому

    Thank you!

  • @AmarjitKumar-st6jw
    @AmarjitKumar-st6jw 5 років тому

    Sir u r amazing

  • @sadeepweerasinghe
    @sadeepweerasinghe 5 років тому

    great

  • @saeedtalib8358
    @saeedtalib8358 5 років тому

    nice video

  • @krishnasaikrishnasai5122
    @krishnasaikrishnasai5122 5 років тому

    Sir I am learning Mean stack!!! am unable to understand that course anywhere!!! then one of my friends suggested ur videos.....!!!! You are Really amazing sir...!!! I want others parts like MongoDB, ExpressJs and NodeJs…!!!!!!!please sir hoe can I get that videos of urs…?????????? Kindly please Rly to me sir as fast as u can !!!!!!!!!! becoz I have only one month to complete this course!!!!! plzzz plzzz SIR

  • @belmiris1371
    @belmiris1371 5 років тому

    Thank you!