1
resposta

Desabilitando o Form de comentário caso allowComments seja false

Eu implementei da seguinte maneira abaixo, alterando o texto da propriedade placeholder do Html.

Há alguma forma de implementar essa lógica direto no template?

@Input() allowComments: boolean
placeholder = 'Insert your comment here'
disabled: boolean = false

//codigo omitido

ngOnInit(): void {
        if(!this.allowComments) {
            this.placeholder = 'Commens disabled for this photo'
            this.disabled = true
        }
        this.comments$ = this.photoService.getComments(this.photoId)

        this.commentsForm = this.formBuilder.group({
            commentText: [{value: '', disabled: this.disabled}, Validators.maxLength(300)]
        })

//No template:

<textarea 
        [placeholder]="placeholder"
        class="form-control"
        formControlName = "commentText">
</textarea>

//inbound properties:

<ap-photo-comments [photoId]="photo.id" [allowComments]="photo.allowComments" ></ap-photo-comments>
1 resposta
<textarea *ngIf="!disabled"
        [placeholder]='Insert your comment here'
        class="form-control"
        formControlName = "commentText">
</textarea>
<textarea *ngIf="disabled"
        [placeholder]='Commens disabled for this photo'
        class="form-control"
        formControlName = "commentText">
</textarea>

Talvez se você usar o *ngIf validando o estado da variavel disabled para apresentar o textarea de certo. caso o disabled seja falso ele apresenta o textarea com o placeholder "Insert your comment here", e caso o disabled seja true ele apresenta o textarea com o placeholder "Commens disabled for this photo". Com isso você tira essa mudança de placeholder do arquivo TS e deixa apenas no HTML, espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software