angular Ошибка реактивной группы форм, не удалось получить доступ к элементу группы - PullRequest
Новая
       5

angular Ошибка реактивной группы форм, не удалось получить доступ к элементу группы

0 голосов
/ 04 марта 2020

angular Реактивная ошибка группы форм не может получить доступ к элементу группы. angular Ошибка реактивной группы форм, не удалось получить доступ к элементу группы. angular Ошибка реактивной группы форм, не удалось получить доступ к элементу группы. angular Ошибка реактивной группы форм, не удалось получить доступ к элементу группы. angular Ошибка реактивной группы форм, не удалось получить доступ к элементу группы. angular Ошибка реактивной группы форм, не удалось получить доступ к элементу группы. 

  <form (ngSubmit)="onSubmit()" [formGroup]="myReactiveForm">

    <div fromGroupName="userDetails">

      <div class="form-group">
        <label for="username">username*</label>
        <input type="text" class="form-control" formControlName="username"  placeholder="username">
      </div>

      <div class="form-group">            
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" placeholder="Enter email" formControlName="email">   
      </div>

      <small class="text-danger" *ngIf="!myReactiveForm.get('userDetails.email').valid && myReactiveForm.get('userDetails.email').touched">
        enter corrent email
      </small>         



    <button  type="submit" class="btn btn-primary">Submit</button>

  </form>

ц 

export class ReavtiveComponent implements OnInit {


  myReactiveForm : FormGroup

  ngOnInit() {

      this.myReactiveForm = new  FormGroup({

      'userDetails' : new FormGroup({

        'username': new FormControl(null,Validators.required),
        'email' : new FormControl(null,[Validators.required,Validators.email]),

      }),
      'course' : new FormControl('HTML'),
      'gender' : new FormControl('female')

    });
  }

  submiited=false;

    onSubmit(){
      this.submiited=true;
      console.log(this.myReactiveForm);
    }





ReavtiveComponent.html:5 ERROR Error: Cannot find control with name: 'username'
    at _throwError (forms.js:3357)
    at setUpControl (forms.js:3181)
    at FormGroupDirective.addControl (forms.js:7345)
    at FormControlName._setUpControl (forms.js:8070)
    at FormControlName.ngOnChanges (forms.js:7993)
    at checkAndUpdateDirectiveInline (core.js:31906)
    at checkAndUpdateNodeInline (core.js:44367)
    at checkAndUpdateNode (core.js:44306)
    at debugCheckAndUpdateNode (core.js:45328)
    at debugCheckDirectivesFn (core.js:45271)





View_ReavtiveComponent_0 @ ReavtiveComponent.html:5
proxyClass @ compiler.js:19671
logError @ core.js:45546
handleError @ core.js:6066
(anonymous) @ core.js:41058
invoke @ zone-evergreen.js:359
run @ zone-evergreen.js:124
runOutsideAngular @ core.js:39572
tick @ core.js:41055
_loadComponent @ core.js:41096
bootstrap @ core.js:41019
(anonymous) @ core.js:40619
_moduleDoBootstrap @ core.js:40615
(anonymous) @ core.js:40570
invoke @ zone-evergreen.js:359
onInvoke @ core.js:39699
invoke @ zone-evergreen.js:358
run @ zone-evergreen.js:124
(anonymous) @ zone-evergreen.js:855
invokeTask @ zone-evergreen.js:391
onInvokeTask @ core.js:39680
invokeTask @ zone-evergreen.js:390
runTask @ zone-evergreen.js:168
drainMicroTaskQueue @ zone-evergreen.js:559
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:542
scheduleTask @ zone-evergreen.js:381
scheduleTask @ zone-evergreen.js:211
scheduleMicroTask @ zone-evergreen.js:231
scheduleResolveOrReject @ zone-evergreen.js:845
then @ zone-evergreen.js:955
bootstrapModule @ core.js:40600
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:79
0 @ main.ts:12
__webpack_require__ @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
ReavtiveComponent.html:5 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 6, nodeDef: {…}, elDef: {…}, elView: {…}}
View_ReavtiveComponent_0 @ ReavtiveComponent.html:5
proxyClass @ compiler.js:19671
logError @ core.js:45546
handleError @ core.js:6071
(anonymous) @ core.js:41058
invoke @ zone-evergreen.js:359
run @ zone-evergreen.js:124
runOutsideAngular @ core.js:39572
tick @ core.js:41055
_loadComponent @ core.js:41096
bootstrap @ core.js:41019
(anonymous) @ core.js:40619
_moduleDoBootstrap @ core.js:40615
(anonymous) @ core.js:40570
invoke @ zone-evergreen.js:359
onInvoke @ core.js:39699
invoke @ zone-evergreen.js:358
run @ zone-evergreen.js:124
(anonymous) @ zone-evergreen.js:855
invokeTask @ zone-evergreen.js:391
onInvokeTask @ core.js:39680
invokeTask @ zone-evergreen.js:390
runTask @ zone-evergreen.js:168
drainMicroTaskQueue @ zone-evergreen.js:559
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:542
scheduleTask @ zone-evergreen.js:381
scheduleTask @ zone-evergreen.js:211
scheduleMicroTask @ zone-evergreen.js:231
scheduleResolveOrReject @ zone-evergreen.js:845
then @ zone-evergreen.js:955
bootstrapModule @ core.js:40600
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:79
0 @ main.ts:12
__webpack_require__ @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
core.js:38781 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
ReavtiveComponent.html:11 ERROR Error: Cannot find control with name: 'email'
    at _throwError (forms.js:3357)
    at setUpControl (forms.js:3181)
    at FormGroupDirective.addControl (forms.js:7345)
    at FormControlName._setUpControl (forms.js:8070)
    at FormControlName.ngOnChanges (forms.js:7993)
    at checkAndUpdateDirectiveInline (core.js:31906)
    at checkAndUpdateNodeInline (core.js:44367)
    at checkAndUpdateNode (core.js:44306)
    at debugCheckAndUpdateNode (core.js:45328)
    at debugCheckDirectivesFn (core.js:45271)
View_ReavtiveComponent_0 @ ReavtiveComponent.html:11
proxyClass @ compiler.js:19671
logError @ core.js:45546
handleError @ core.js:6066
(anonymous) @ core.js:41058
invoke @ zone-evergreen.js:359
run @ zone-evergreen.js:124
runOutsideAngular @ core.js:39572
tick @ core.js:41055
(anonymous) @ core.js:40893
invoke @ zone-evergreen.js:359
onInvoke @ core.js:39699
invoke @ zone-evergreen.js:358
run @ zone-evergreen.js:124
run @ core.js:39511
next @ core.js:40890
schedulerFn @ core.js:35336
__tryOrUnsub @ Subscriber.js:185
next @ Subscriber.js:124
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:35298
checkStable @ core.js:39642
onHasTask @ core.js:39719
hasTask @ zone-evergreen.js:411
_updateTaskCount @ zone-evergreen.js:431
_updateTaskCount @ zone-evergreen.js:264
runTask @ zone-evergreen.js:185
drainMicroTaskQueue @ zone-evergreen.js:559
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:542
scheduleTask @ zone-evergreen.js:381
scheduleTask @ zone-evergreen.js:211
scheduleMicroTask @ zone-evergreen.js:231
scheduleResolveOrReject @ zone-evergreen.js:845
then @ zone-evergreen.js:955
bootstrapModule @ core.js:40600
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:79
0 @ main.ts:12
__webpack_require__ @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
ReavtiveComponent.html:11 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 16, nodeDef: {…}, elDef: {…}, elView: {…}}
View_ReavtiveComponent_0 @ ReavtiveComponent.html:11
proxyClass @ compiler.js:19671
logError @ core.js:45546
handleError @ core.js:6071
(anonymous) @ core.js:41058
invoke @ zone-evergreen.js:359
run @ zone-evergreen.js:124
runOutsideAngular @ core.js:39572
tick @ core.js:41055
(anonymous) @ core.js:40893
invoke @ zone-evergreen.js:359
onInvoke @ core.js:39699
invoke @ zone-evergreen.js:358
run @ zone-evergreen.js:124
run @ core.js:39511
next @ core.js:40890
schedulerFn @ core.js:35336
__tryOrUnsub @ Subscriber.js:185
next @ Subscriber.js:124
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:35298
checkStable @ core.js:39642
onHasTask @ core.js:39719
hasTask @ zone-evergreen.js:411
_updateTaskCount @ zone-evergreen.js:431
_updateTaskCount @ zone-evergreen.js:264
runTask @ zone-evergreen.js:185
drainMicroTaskQueue @ zone-evergreen.js:559
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:542
scheduleTask @ zone-evergreen.js:381
scheduleTask @ zone-evergreen.js:211
scheduleMicroTask @ zone-evergreen.js:231
scheduleResolveOrReject @ zone-evergreen.js:845
then @ zone-evergreen.js:955
bootstrapModule @ core.js:40600
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:79
0 @ main.ts:12
__webpack_require__ @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
client:52 [WDS] Live Reloading enabled.

1 Ответ

0 голосов
/ 04 марта 2020

Вы можете попробовать ниже способ 

  myReactiveForm : FormGroup

fbForm(){
  this.myReactiveForm = this.fb.group({
    username: ['', Validators.nullValidator],
    email: ['', Validators.required],
    course: ['HTML', Validators.required],
    gender: ['female', Validators.required],
  });
}

 constructor(private fb: FormBuilder) {
    this.fbForm()
 }
...