1

Estou com uma aplicação em Angular da versão 6, e quando clico no projeto para editar o sistema carrega a tela de edição com todos os valores, essa aplicação não está com banco de dados e não existe um back-end conectado a ela, todos os valores são estáticos.

O que preciso é desabilitar algumas propriedades do formulários para que o usuário consiga editar alguns campos e outros campos não esteja disponível para o usuário alterar como é o meu caso de não permitir o usuário de alterar o campo descrição.

A minha tentativa foi colocar ela linha de código abaixo;

 recipeIngredients.get('recipeForm').disable();

Porém não tive sucesso, o que ele tem feito é não mostrar as informações em tela. Alguém teria alguma sugestão para resolver meu problema por favor?

Se trata de um formulário reativo.

Esse é o componente completo;

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { FormGroup, FormControl, FormArray, Validators } from '@angular/forms';

import { RecipeService } from '../recipe.service';

@Component({
  selector: 'app-recipe-edit',
  templateUrl: './recipe-edit.component.html',
  styleUrls: ['./recipe-edit.component.css']
})
export class RecipeEditComponent implements OnInit {
  id: number;
  editMode = false;
  recipeForm: FormGroup;

  constructor(private route: ActivatedRoute,
              private recipeService: RecipeService,
              private router: Router) {
  }

  ngOnInit() {
    this.route.params
      .subscribe(
        (params: Params) => {
          this.id = +params['id'];
          this.editMode = params['id'] != null;
          this.initForm();
        }
      );
  }




  onSubmit() {
    // const newRecipe = new Recipe(
    //   this.recipeForm.value['name'],
    //   this.recipeForm.value['description'],
    //   this.recipeForm.value['imagePath'],
    //   this.recipeForm.value['ingredients']);
    if (this.editMode) {
      this.recipeService.updateRecipe(this.id, this.recipeForm.value);
    } else {
      this.recipeService.addRecipe(this.recipeForm.value);
    }
    this.onCancel();
  }

  onAddIngredient() {
    (<FormArray>this.recipeForm.get('ingredients')).push(
      new FormGroup({
        'name': new FormControl(null, Validators.required),
        'amount': new FormControl(null, [
          Validators.required,
          Validators.pattern(/^[1-9]+[0-9]*$/)
        ])
      })
    );
  }




  onDeleteIngredient(index: number) {
    (<FormArray>this.recipeForm.get('ingredients')).removeAt(index);
  }

  onCancel() {
    this.router.navigate(['../'], {relativeTo: this.route});
  }

  private initForm() {
    let recipeName = '';
    let recipeImagePath = '';
    let recipeDescription = '';
    let recipeIngredients = new FormArray([]);

    if (this.editMode) {
      const recipe = this.recipeService.getRecipe(this.id);
      recipeName = recipe.name;
      recipeImagePath = recipe.imagePath;
      recipeDescription = recipe.description;
      recipeIngredients.get('recipeForm').disable();
      if (recipe['ingredients']) {
        for (let ingredient of recipe.ingredients) {
          recipeIngredients.push(
            new FormGroup({
              'name': new FormControl(ingredient.name, Validators.required),
              'amount': new FormControl(ingredient.amount, [
                Validators.required,
                Validators.pattern(/^[1-9]+[0-9]*$/)
              ])
            })
          );
        }
      }

    }

    this.recipeForm = new FormGroup({
      'name': new FormControl(recipeName, Validators.required),
      'imagePath': new FormControl(recipeImagePath, Validators.required),
      'description': new FormControl(recipeDescription, Validators.required),
      'ingredients': recipeIngredients
    });
  }



}

Para quem quiser ter acesso ao projeto completo, está no meu repositório;

MEU REPOSITÓRIO

2 Respostas 2

0

Como visto nesse post, para desativar o campo você pode colocar na criação do form o código { disabled: true } ou { disabled: variável }, assim a criação do seu formulário ficaria assim:

this.recipeForm = new FormGroup({
  ...
  'description': new FormControl({ disabled: true },recipeDescription, Validators.required),
});

ou então selecionado o elemento através do comando

this.recipeForm.controls['description'].disable();
-2

A maneira mais simples é utilizar:

this.form.controls['controlname'].disable();

Você deve fazer log-in para responder a esta pergunta.