Невозможно получить ссылку на элементы внутри модальных, используя @viewchild - PullRequest
Новая
       8

Невозможно получить ссылку на элементы внутри модальных, используя @viewchild

0 голосов
/ 22 ноября 2018

Я работаю над проектом Angular-6.Я создал форму внутри модального ngxbootstrap, которая работает нормально.Эта форма имеет различные элементы ввода. Я хочу получить доступ к нескольким из этих элементов, но проблема заключается в том, что всякий раз, когда я пытаюсь получить доступ к этим элементам с помощью @viewchild, результат не определен, что в основном связано с тем, что эти элементы не существуют в DOM.Итак, есть ли способ получить к ним доступ ниже, это мой код ... 

@Component({
selector: 'app-roles',
templateUrl: './roles.component.html',
styleUrls: ['./roles.component.scss'],
providers:[NgbActiveModal],
})
export class RolesComponent implements OnInit,AfterViewInit {
@ViewChild('dataTable') table:ElementRef;
@ViewChild('rolename') rolename:ElementRef; //Here it shows undefined
dataTable:any;
roleref:any;
error_array=new Array();
all_roles=new Array();
added:boolean;
closeResult: string;
modalRef: NgbModalRef;
is_shown:boolean;


profileForm=new FormGroup({
rolename:new FormControl('',[Validators.required,Validators.minLength(4)])
});
constructor(private roleservice:RolesService,private fb:FormBuilder,private 
 modalService: NgbModal,public activeModal: NgbActiveModal) 
{
}

ngOnInit() {
this.dataTable=$(this.table.nativeElement);
this.dataTable.dataTable();

}

ngAfterViewInit() {
}

open(content,form:NgForm) {
this.is_shown=true;
this.modalRef = this.modalService.open(content,{ 
size: "lg",
centered: false,
backdrop: 'static'});
this.modalRef.result.then((result) => {
  this.closeResult = `Closed with: ${result}`;
}, (reason) => {
    this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
}

private getDismissReason(reason: any): string {
this.is_shown=false;
this.profileForm.reset();
if (reason === ModalDismissReasons.ESC) {
  return 'by pressing ESC';
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
  return 'by clicking on a backdrop';
} else {
  return  `with: ${reason}`;
}
}
}

Ниже дан код HTML 

  <ng-template #content let-d="dismiss">
                <form class="form" [formGroup]="profileForm" (ngSubmit)="onSubmit()" autocomplete="off" >
                <div class="modal-header">
                  <h4 class="modal-title">Add New Role</h4>
                  <button type="button" #clsbtn class="close" aria-label="Close" (click)="d('Cross click')">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>

        <div class="modal-body" *ngIf="is_shown==true">
            <div class="modal-body">
              <div class="col-md-5">
                                <div class="card-content">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="material-icons">face</i>
                                        </span>
                                        <div class="form-group"><input type="text" #rolename formControlName="rolename"  class="form-control" placeholder="RoleName..." required/><span class="material-input"></span></div>
                                        <div *ngIf="profileForm.get('rolename').invalid &&  profileForm.get('rolename').touched" class="alert alert-danger">
                                            <div *ngIf="profileForm.get('rolename').errors.required">
                                                RoleName is required.
                                              </div>
                                              <div *ngIf="profileForm.get('rolename').errors.minlength">
                                                RoleName must be at least 4 characters long.
                                              </div>
                                        </div>
                                    </div>
                                 </div>
      </div>
                    </div>
                  </div>
                </div>
                <div class="modal-footer">
                  <!--<button type="button" class="btn btn-light" (click)="d('Close click')">Close</button>-->
                    <button class="btn btn-danger btn-round" style="position:relative;right:60px" [disabled]="profileForm.invalid">
                            <i class="material-icons">check</i> Add
                        </button>   
                </div>
                </form>
              </ng-template>

Ответы [ 2 ]

0 голосов
/ 22 ноября 2018

Это невозможно, потому что модал ngxbootstrap динамически присоединяет содержимое вашего шаблона к вашему компоненту, когда вы вызываете метод open из modalservice.

ngOnInit или ngAfterViewInit не позволят вам получить ссылкуваших встроенных элементов, потому что ваши элементы не вставлены в ваш DOM.

0 голосов
/ 22 ноября 2018

dataTable Я думаю, что не определено в представлении.

rolename определено внутри *ngIf, и, возможно, вы попытаетесь получить к нему доступ, когда условие ложно.

Вы можете попробовать что-то вроде этого: 

private yourElement: ElementRef;

@ViewChild('elementName') set elementName(content: ElementRef) {
  this.yourElement = content;
}

и использовать yourElement, когда доступно в вашем компоненте.

...