[MÚSICA]
Hora de passar para a terceira tarefa neste curso.
Nesta tarefa, como você já deve ter esperado,
nós estaremos olhando para formas angulares e observáveis.
Isso é o que aprendemos i n este módulo particular do curso.
Nesta atribuição, você estará projetando um formulário
dentro da visualização de componentes de detalhes do prato que permitirá
os usuários enviar seus comentários sobre um prato específico.
Você estará usando formas reativas angulares para projetar o formulário e
você estará usando as mudanças de valor observáveis na ordem
para iniciar a validação de formulário,
assim como fizemos no exercício que você acabou de completar e
você usará um novo componente de material angular chamado
Angular Componente do controle deslizante de material.
O componente do controle deslizante será usado para inserir a classificação para
o prato pela pessoa que enviar a contagem.
Vejamos as três tarefas nesta atribuição com um pouco mais de detalhes.
Então aqui, Eu estou mostrando seu primeiro prato do menu para
para ilustrar para você as três tarefas que precisam ser concluídas nesta tarefa.
Então, nesta atribuição, vamos criar um formulário em
a seção de comentários do seu componente detalhe prato.
O formulário contém dois campos aqui.
O campo de nome e um campo de comentário.
No campo Nome, o nome do autor para o comentário será inserido pelo usuário.
Em seguida, no campo de comentário que é uma área de texto,
você permitirá que o autor insira o comentário que deseja enviar.
Além disso, a fim de obter a classificação para o prato,
vamos usar este componente de material angular chamado controle deslizante de material angular.
Para este componente do controle deslizante,
um link para a documentação é fornecido nos recursos adicionais.
O componente do controle deslizante é bastante simples de criar.
Para este componente do controle deslizante, você exibirá as marcas de verificação como esta.
Então você pode ver que você tem um, dois, três, quatro marcas de ticks já e
o quinto está bem abaixo deste polegar aqui.
Assim, e também quando você mostrar a vista de polegar,
ele irá mostrar o corte na classificação selecionada como o.
Então, isso tem que ser rotulado no slide angular do componente que você incluir
em sua fonte e isso permitirá que você selecione a classificação para o prato.
Então, esta é a sua primeira tarefa nesta tarefa.
Sua segunda tarefa é adicionar validação de formulário para este formulário.
Agora este formulário deve ser criado usando fontes reativas angulares e
também usando as alterações de valor observável, a fim de observar
quaisquer alterações em qualquer um destes elementos de controle de formulário ela.
E sempre que qualquer alteração ocorrer, você deve iniciar imediatamente a validação do formulário
usando as alterações de valor observáveis exatamente como fizemos em
o exercício que você acabou de completar na lição anterior.
Agora, a validação que você precisa executar é que o nome e
o comentário são campos obrigatórios.
Além disso, o nome deve conter pelo menos dois caracteres.
Então, se eu apenas digitar um caractere, então você deve mostrar uma mensagem aqui dizendo,
Nome do Autor deve ter pelo menos dois caracteres.
Agora, se é claro, nós digitamos mais, então isso vai desaparecer.
Se você remover o nome completamente do campo,
então você exibir uma mensagem dizendo: Nome do autor é obrigatório.
Então, a mensagem necessária deve ser exibida aqui.
Assim que eu digitar pelo menos dois caracteres,
então a mensagem desaparecerá.
Agora para o campo de comentário também, este é um campo obrigatório.
Então, você precisa digitar pelo menos alguns caracteres.
Não há restrição no número de caracteres.
Mas se nenhum caractere for digitado quando você exibir a mensagem aqui dizendo,
comente conforme necessário.
Se seu formulário estiver inválido no momento, seu botão de envio não funcionará.
Mas assim que seu formulário se tornar válido, seu botão de envio funcionará e
deve permitir que você envie a fonte.
Então, essa é a segunda tarefa em sua tarefa.
A tarefa difícil em sua tarefa é que assim que o formulário tiver informações válidas,
você deve exibir uma visualização do que você acabou de enviar no formulário.
Deixe-me digitar algo mais significativo aqui, de modo que eles são
visualização parece interessante.
Então você vê que assim que você digitar informações válidas em seu formulário,
você deve mostrar uma prévia do que o comentário será
se ele for adicionado a essa lista de comentários para o prato.
Agora observe que na pré-visualização, você ainda não tem a data exibida.
Então, isso é outra coisa que você precisa ter em mente.
Se o formulário se tornar inválido, a visualização desaparecerá.
Mas assim que o formulário se tornar válido, a visualização reaparecerá.
Então, isso é algo que você deve projetar adequadamente usando a lista ND e
, em seguida, certificando-se de que o formulário é válido antes de exibir essas informações lá.
Então, essa é a pré-visualização.
Agora, quando o usuário clica no botão Enviar,
então há algumas coisas que você precisa fazer.
Quando o usuário clica no botão Enviar, então este comentário será
adicionado à lista de comentários que você tem para este prato em particular.
Então, deixe-me clicar no botão enviar e você notará imediatamente que o formulário
foi adicionado à lista de comentários para este prato em particular.
Então, você vê que o último comentário que eu acabei de inserir foi adicionado aqui.
Observe também que a data para
o formulário foi adicionada ao comentário aqui.
Então você deve pegar os valores do modelo de formulário e
, em seguida, copiá-lo para um modelo de dados, e então você empurra o comentário
para o raio de objeto JavaScript de comentários para o objeto prato.
Então, isso é algo que você precisa fazer usando o método de push array para
array de objetos JavaScript.
Além disso, a data deve ser configurada automaticamente e
adicionado a esse modelo de dados.
Lembre-se que o modelo de formulário não contém a data, mas
o modelo de dados que é derivado da classe de comentário que projetamos,
o modelo de dados contém o autor, a classificação, o comentário e a data.
Então, você precisa adicionar a data no modelo de dados.
Então, este é o lugar onde você vai fazer uso da classe de data Java Script
juntamente com a conversão para uma string ISO
antes de armazenar no campo de data do seu modelo de dados de comentário.
Agora eu forneci links para exemplos de como você pode
criar data e como você cab converter a data em uma string ISO
na documentação para esta atribuição,
e também nos recursos adicionais para este item.
Então, por favor procure isso para entender como você deve
adicionar a data ao campo de comentário lá.
E uma vez que o comentário é empurrado para a matriz de comentários,
então ele vai se juntar ao resto dos comentários para esse prato em particular.
Você tem que lembrar que não estamos salvando isso no lado do servidor,
porque não temos um lado do servidor.
Então, se você recarregar sua página, esse comentário desaparecerá.
Isso é perfeitamente aceitável.
Nesta fase, não estamos tentando salvar as alterações para
o prato de volta para o servidor através do nosso serviço de prato.
Isso faremos em um dos ciclos posteriores.
Então, neste momento, se você recarregar esta página, o comentário que você acabou de inserir vai
desaparecer, mas isso é perfeitamente aceitável.
Então, esta é a terceira tarefa em sua tarefa.
Depois de concluir todas as três tarefas, certifique-se de que tudo funciona
corretamente antes de enviar a solução de atribuição para o seu sistema.
[MÚSICA]