How to use the @angular/forms.FormControl function in @angular/forms

{
      provide: NG_VALIDATORS,
      useExisting: CreateGoodNameComponent,
      multi: true
    }
  ]
})
export class CreateGoodNameComponent
    implements OnInit, ControlValueAccessor, Validator {
  @Input() initialValue: string;
  @Output() name: EventEmitter = new EventEmitter();

  // Presentation input
  @Input() inputLabel: string = 'Name';

  nameControl = new FormControl(this.initialValue, [Validators.required]);

  constructor(private elem: ElementRef, private rs: RunService) {}

  ngOnInit() {
    this.nameControl.valueChanges.subscribe((newValue: string) => {
      this.name.emit(newValue);
    });
    this.nameControl.valueChanges.pipe(startWith(this.nameControl.value));
    // set initial value after subscribing to changes so that it will be emitted
    this.nameControl.setValue(this.initialValue);
  }

  writeValue(value: any) {
    if (value) {
      this.nameControl.setValue(value);
    } else {

() => {
          expect(RxwebValidators.pattern()(new FormControl(null))).toBeNull();
        });

{{ option.foo }}
      
    
  `,
})
export class AutocompleteRequired {
  public myCtrl = new FormControl(null, [Validators.required]);
  public states: State[] = STATES.slice();
}

@Component({
  template: `
    

ngOnInit() {

    this.scroll.scrollTo({
      target: 'top'
    });

    this.firstForm = this.formBuilder.group({firstCtrl: ['', Validators.required]});
    this.secondForm = this.formBuilder.group({secondCtrl: ['', Validators.required]});
    this.thirdForm = this.formBuilder.group({thirdCtrl: ['', Validators.required]});

    const start = new Date();
    start.setFullYear(2016);
    start.setMonth(0);
    start.setDate(1);

    this.startDate = new FormControl(start);

    const end = new Date();
    end.setFullYear(2016);
    end.setMonth(5);
    end.setDate(1);

    this.endDate = new FormControl(end);

    this.capitalBase = 1000000;
    this.ticker = '';

    this.noShorts = false;
    this.useClf = false;

    this.beginSim = false;
    this.validating = false;

ngOnInit() {
    this.signupForm = new FormGroup(
      {
        email: new FormControl('', [Validators.required, Validators.email]),
        password: new FormControl('', [
          Validators.required,
          PasswordStrengthValidators.validatePassword
        ]),
        passwordRepeat: new FormControl('', [Validators.required]),
        privacyPolicy: new FormControl('', (control: FormControl) => {
          const agreed = control.value;
          if (!agreed) {
            return { agreed: true };
          }
          return null;
        }),
        termsAndConditions: new FormControl('', (control: FormControl) => {
          const agreed = control.value;
          if (!agreed) {
            return { agreed: true };
          }

private initializeUpdateForm(): void {
    const endDate = this.batchDetails.endDate ? new Date(this.batchDetails.endDate) : null;
    this.batchUpdateForm = new FormGroup({
      name: new FormControl(this.batchDetails.name, [Validators.required]),
      description: new FormControl(this.batchDetails.description),
      enrollmentType: new FormControl(this.batchDetails.enrollmentType, [Validators.required]),
      startDate: new FormControl(new Date(this.batchDetails.startDate), [Validators.required]),
      endDate: new FormControl(endDate),
      mentors: new FormControl(),
      users: new FormControl()
    });
    this.batchUpdateForm.valueChanges.subscribe(val => {
      if (this.batchUpdateForm.status === 'VALID') {
        this.disableSubmitBtn = false;
      } else {
        this.disableSubmitBtn = true;
      }
    });
  }
  /**

constructor(
        public dialogRef: MatDialogRef,
        public nodeService: NodeService,
        private toasterService: ToasterService,
        private formBuilder: FormBuilder
    ) {
        this.nameForm = this.formBuilder.group({
            name: new FormControl('', Validators.required),
        });

        this.inputForm = this.formBuilder.group({
            sourcePort: new FormControl('', Validators.required),
            sourceDlci: new FormControl('', Validators.required),
            destinationPort: new FormControl('', Validators.required),
            destinationDlci: new FormControl('', Validators.required),
        });
    }

@Component({
  selector: 'es-wizard',
  templateUrl: './wizard-overview.component.html',
  styleUrls: ['./wizard-overview.component.scss']
})

export class WizardOverviewComponent implements OnInit, OnDestroy {
  @ViewChild('stepper') private stepper: MatStepper;

  administratorsSub: Subscription;
  administrators: MediaServerUser[];

  introFormGroup: FormGroup;
  nameControl = new FormControl('', [Validators.required]);
  languageControl = new FormControl('en-US', [Validators.required]);

  serverForm: FormGroup;
  serverAddressControl = new FormControl('', [Validators.required]);
  serverPortControl = new FormControl('', [Validators.required]);
  serverProtocolControl = new FormControl('1', [Validators.required]);
  serverApiKeyControl = new FormControl('', [Validators.required]);
  selectedAdministratorControl = new FormControl('');


  exceptionLoggingControl = new FormControl(false);

  private languageChangedSub: Subscription;
  private searchEmbySub: Subscription;
  private settingsSub: Subscription;
  private fireSyncSub: Subscription;
  private serverPortControlChange: Subscription;

Validators.email,
    ]),
    terms: new FormControl(false, [
      (control) => {
        if (!control.value) {
          return {
            termsDisagree: true,
          };
        }
        return null;
      }
    ]),
    gender: new FormControl(null, Validators.required),
    class: new FormControl(null, [ Validators.required ]),
    alignment: new FormControl(null, [ Validators.required ]),
    hitpoints: new FormControl(this.defaultValues.hitpoints, [ Validators.min(1), Validators.max(100)]),
    strength: new FormControl(this.defaultValues.strength, [ Validators.min(1), Validators.max(10)]),
    agility: new FormControl(this.defaultValues.agility, [ Validators.min(1), Validators.max(10)]),
    intelligence: new FormControl(this.defaultValues.intelligence, [ Validators.min(1), Validators.max(10)]),
    perks: new FormControl(this.defaultValues.perks, [ this.validatePerks.bind(this) ])
  }, [
    this.validateSkills.bind(this)
  ]);

  get level() {
    const c = this.formGroup && this.formGroup.get('level');
    return c ? c.value : 0;
  }

  get skillPoints() {
    const s = this.formGroup && this.formGroup.get('strength');
    const a = this.formGroup && this.formGroup.get('agility');