const heroForm = new FormGroup({
  'name': new FormControl(),
  'alterEgo': new FormControl(),
  'power': new FormControl()
});
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> heroForm<span class="token operator">:</span> <span class="token builtin">any</span></code></pre>

const heroForm = new FormGroup({
  'name': new FormControl(),
  'alterEgo': new FormControl(),
  'power': new FormControl()
}, { validators: identityRevealedValidator });
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> heroForm<span class="token operator">:</span> <span class="token builtin">any</span></code></pre>

profileForm = new FormGroup({
  firstName: new FormControl(''),
  lastName: new FormControl(''),
  address: new FormGroup({
    street: new FormControl(''),
    city: new FormControl(''),
    state: new FormControl(''),
    zip: new FormControl('')
  })
});
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>

this.heroForm = new FormGroup({
  name: new FormControl(this.hero.name, [
    Validators.required,
    Validators.minLength(4),
    forbiddenNameValidator(/bob/i) // <-- Here's how you pass in the custom validator.
  ]),
  alterEgo: new FormControl(this.hero.alterEgo),
  power: new FormControl(this.hero.power, Validators.required)
});
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">this</span><span class="token operator">:</span> <span class="token keyword">typeof</span> globalThis</code></pre>

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-profile-editor',
  templateUrl: './profile-editor.component.html',
  styleUrls: ['./profile-editor.component.css']
})
export class ProfileEditorComponent {
  profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
  });
}
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">interface</span> <span class="token class-name">Component</span>
<span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">const</span> Component<span class="token operator">:</span> ComponentDecorator
<span class="token keyword">import</span> Component</code><div class="typing-tooltip-markup">Supplies configuration metadata for an Angular component.
Component decorator and metadata.<br><br><em>@publicApi</em><br><br><em>@Annotation</em><br><br><em>@publicApi</em></div></pre>

new FormControl('', {updateOn: 'blur'});
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-name-editor',
  templateUrl: './name-editor.component.html',
  styleUrls: ['./name-editor.component.css']
})
export class NameEditorComponent {
  name = new FormControl('');
}
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">interface</span> <span class="token class-name">Component</span>
<span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">const</span> Component<span class="token operator">:</span> ComponentDecorator
<span class="token keyword">import</span> Component</code><div class="typing-tooltip-markup">Supplies configuration metadata for an Angular component.
Component decorator and metadata.<br><br><em>@publicApi</em><br><br><em>@Annotation</em><br><br><em>@publicApi</em></div></pre>

const heroForm = new FormGroup({
  'name': new FormControl(),
  'alterEgo': new FormControl(),
  'power': new FormControl()
});
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> heroForm<span class="token operator">:</span> <span class="token builtin">any</span></code></pre>

profileForm = new FormGroup({
  firstName: new FormControl(''),
  lastName: new FormControl(''),
  address: new FormGroup({
    street: new FormControl(''),
    city: new FormControl(''),
    state: new FormControl(''),
    zip: new FormControl('')
  })
});
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>

const heroForm = new FormGroup({
  'name': new FormControl(),
  'alterEgo': new FormControl(),
  'power': new FormControl()
}, { validators: identityRevealedValidator });
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> heroForm<span class="token operator">:</span> <span class="token builtin">any</span></code></pre>

ngOnInit(): void {
  this.heroForm = new FormGroup({
    name: new FormControl(this.hero.name, [
      Validators.required,
      Validators.minLength(4),
      forbiddenNameValidator(/bob/i) // <-- Here's how you pass in the custom validator.
    ]),
    alterEgo: new FormControl(this.hero.alterEgo),
    power: new FormControl(this.hero.power, Validators.required)
  });

}

get name() { return this.heroForm.get('name'); }

get power() { return this.heroForm.get('power'); }
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>

this.heroForm = new FormGroup({
  name: new FormControl(this.hero.name, [
    Validators.required,
    Validators.minLength(4),
    forbiddenNameValidator(/bob/i) // <-- Here's how you pass in the custom validator.
  ]),
  alterEgo: new FormControl(this.hero.alterEgo),
  power: new FormControl(this.hero.power, Validators.required)
});
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">this</span><span class="token operator">:</span> <span class="token keyword">typeof</span> globalThis</code></pre>

import * as React from 'react';
import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Switch from '@mui/material/Switch';

export default function SwitchLabels() {
  return (
    <FormGroup>
      <FormControlLabel control={<Switch defaultChecked />} label="Label" />
      <FormControlLabel disabled control={<Switch />} label="Disabled" />
    </FormGroup>
  );
}
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">namespace</span> React
<span class="token keyword">import</span> React</code></pre>

<FormGroup>
  <FormControlLabel control={<Switch defaultChecked />} label="Label" />
  <FormControlLabel disabled control={<Switch />} label="Disabled" />
</FormGroup>
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">function</span> <span class="token function">FormGroup</span><span class="token punctuation">(</span><span class="token parameter">props<span class="token operator">:</span> FormGroupProps</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token constant">JSX</span><span class="token punctuation">.</span>Element
<span class="token keyword">import</span> FormGroup</code><div class="typing-tooltip-markup"><code>FormGroup</code> wraps controls such as <code>Checkbox</code> and <code>Switch</code>.
It provides compact row layout.
For the <code>Radio</code>, you should be using the <code>RadioGroup</code> component instead of this one.<br><br>Demos:<br><br><ul><li><a href="https://mui.com/components/checkboxes/">Checkboxes</a></li><li><a href="https://mui.com/components/switches/">Switches</a></li></ul><br><br>API:<br><br><ul><li><a href="https://mui.com/api/form-group/">FormGroup API</a></li></ul></div></pre>

<FormGroup>
  <FormControlLabel control={<Checkbox defaultChecked />} label="Label" />
  <FormControlLabel disabled control={<Checkbox />} label="Disabled" />
</FormGroup>
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">function</span> <span class="token function">FormGroup</span><span class="token punctuation">(</span><span class="token parameter">props<span class="token operator">:</span> FormGroupProps</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token constant">JSX</span><span class="token punctuation">.</span>Element
<span class="token keyword">import</span> FormGroup</code><div class="typing-tooltip-markup"><code>FormGroup</code> wraps controls such as <code>Checkbox</code> and <code>Switch</code>.
It provides compact row layout.
For the <code>Radio</code>, you should be using the <code>RadioGroup</code> component instead of this one.<br><br>Demos:<br><br><ul><li><a href="https://mui.com/components/checkboxes/">Checkboxes</a></li><li><a href="https://mui.com/components/switches/">Switches</a></li></ul><br><br>API:<br><br><ul><li><a href="https://mui.com/api/form-group/">FormGroup API</a></li></ul></div></pre>

import * as React from 'react';
import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';

export default function CheckboxLabels() {
  return (
    <FormGroup>
      <FormControlLabel control={<Checkbox defaultChecked />} label="Label" />
      <FormControlLabel disabled control={<Checkbox />} label="Disabled" />
    </FormGroup>
  );
}
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">namespace</span> React
<span class="token keyword">import</span> React</code></pre>

import * as React from 'react';
import Checkbox from '@mui/material/Checkbox';
import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormControl from '@mui/material/FormControl';
import FormLabel from '@mui/material/FormLabel';

export default function FormControlLabelPosition() {
  return (
    <FormControl component="fieldset">
      <FormLabel component="legend">Label placement</FormLabel>
      <FormGroup aria-label="position" row>
        <FormControlLabel
          value="top"
          control={<Checkbox />}
          label="Top"
          labelPlacement="top"
        />
        <FormControlLabel
          value="start"
          control={<Checkbox />}
          label="Start"
          labelPlacement="start"
        />
        <FormControlLabel
          value="bottom"
          control={<Checkbox />}
          label="Bottom"
          labelPlacement="bottom"
        />
        <FormControlLabel
          value="end"
          control={<Checkbox />}
          label="End"
          labelPlacement="end"
        />
      </FormGroup>
    </FormControl>
  );
}
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">namespace</span> React
<span class="token keyword">import</span> React</code></pre>

import React from 'react';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { combineForms } from 'react-redux-form';
 
import MyForm from './components/my-form-component';
 
const initialUser = { name: '' };
 
const store = createStore(combineForms({
  user: initialUser,
}));
 
class App extends React.Component {
  render() {
    return (
      <Provider store={ store }>
        <MyForm />
      </Provider&gt;
    );
  }
}
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">namespace</span> React
<span class="token keyword">import</span> React</code></pre>