How to add dynamic fields in Angular 6

  • FormArray is one of the three basic building blocks to define forms in angular along with FormGroup, FormControl.
  • It works similar to FormGroup, where a FormArray status depends upon all its children status. That is if any one FormControl in FormArray is invalid then the status of the entire array becomes
  • A FormArray can hold any instances either it can be FormGroup, FormControl (or) even other
  • This is mostly used for adding dynamic controls in Reactive Forms.

Step1: Create a component

File: FormComponent.ts

Step2: Create a template

File: template.html

Step3: Adding FormsComponent in AppModule

File: app.module.ts

Step4: Bootstraping AppModule

File: main.ts

Step5: Creating Startup file. Add the required files for bootstrap in your directory.

File: index.html

Output:

Entry with Custom Border in Xamarin Forms

Introduction:

In Xamarin Forms Entry control allows a single line of text to be edited. This article demonstrates how to create a custom renderer for the Entry control, enabling developers to override the default native rendering with their own platform-specific customization.

Custom Renderer:

  1. This sample demonstrates a custom renderer for the Entry control, “Enabling developers to override the default native rendering” with their own platform-specific customization.
  2. Custom renderers provide a powerful approach for customizing the appearance and behavior of Xamarin Forms controls. They can be used for small styling changes or sophisticated platform-specific layout and behavior customization.

 

Step1: Create the Mobile App (Xamarin Forms) Project

Open VisualStudio 2017 à File à New à Project à Choose Cross-Platform Template à Choose MobileApp (Xamarin.Forms )à Name it as EntryLineWithanyColorà Click on OKà Chose .NetStanderdà Click OK

 

Step2: Creating CustomEntry.cs

Go to Project EntryLineWithanyColorà Right Click àAdd Class CustomEntry.cs

File Name: CustomEntry.cs

A custom Entry can be created by subclassing the Entry control, as shown in the following code

The CustomEntry control is created in the .NET Standard library project and is simply  ENTRY control. Customization of the control will be carried out in the custom renderer, so no additional implementation is required in the CustomEntry control.

 

Step 3:  Create a class in the Android directory and name it as CustomRenderer.cs

Go to EntryLineWithanyColor.Android à Right Click àAdd Class CustomRenderer.cs

 

File Name: CustomRenderer.cs

Brief Explanation of the above Code:

Here Added the ASSEMBLY attribute it means like declarations

  • CustomEntry is the name of the placeholder class in your common (PCL or Shared) Forms library.
  • ExportRenderer is the name of the actual platform specific implementation class in your iOS/Android/WP project.

Essentially, telling Forms, “when you need to render CustomEntry on Platform X, use the class CustomRenderer.”

  1. Create a subclass of the EntryRenderer class that renders the native control.
  2. Override the OnElementChangedmethod that renders the native control and write logic to customize the control. This method is called when the corresponding Xamarin Forms control is created.
  3. Added an ExportRendererattribute to the custom renderer class to specify that it will be used to render the Xamarin Forms control. This attribute is used to register the custom renderer with Xamarin Forms.

 

 

Step 4: Create UI for Border less Entry 

File Name: MainPage.xaml

Here for Example I have taken Login Form for better Understand

Here we have to declare the Local Refernce nameSpace in MainPage.xaml

 

 

Output: Run the program Ctrl+F5