How to use where clause in Knex
Create refunds with Stripe
Load HTML with Cheerio
How to send POST request with Axios
Find intersection of array in Lodash
Powered by Official white Bloop logo with a period

Terms / Privacy / Search / Support

  • 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>
    Docs
    0
  • 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>
    Docs
    0
  • 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>
    Docs
    0
  • 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>
    Docs
    0
  • 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>
    Docs
    0
  • new FormControl('', {updateOn: 'blur'});
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>
    Docs
    0
  • 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>
    Docs
    0
  • 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>
    Docs
    0
  • 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>
    Docs
    0
  • 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>
    Docs
    0
  • 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>
    Docs
    0
  • 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>
    Docs
    0
  • MaterialUI V5 - example
    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>
    Docs
    0
  • MaterialUI V5 - example
    <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>
    Docs
    0
  • MaterialUI V5 - example
    <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>
    Docs
    0
  • MaterialUI V5 - example
    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>
    Docs
    0
  • MaterialUI V5 - example
    Label placement
    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>
    Docs
    0
  • 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 (
          &lt;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>
    Docs
    0
  • Powered by Official black Bloop logo with a period
    download the IDE extension

    View other examples